零点 起 飞 学 编程 


宏 
点 


起 
包 


超 值 PVP 光盘 ， 你 值得 拥有 | 
本 书 实例 源 文件 
14.3 小 时 配套 教学 视频 
12.6 小 时 进 阶 视频 讲座 
184 个 进 阶 实例 源 文件 
26 个 进 阶 案例 源 文 件 


26.9 小 时 高 清 多 媒体 教学 视频 
项 宇 峰 ”等 编著 


: 基础 一 进 阶 一 实战 

: 基本 语法 一 典型 实例 一 编程 练习 -项目 实 越 
: 311 个 实例 、3 个 项 目 案例 52 全 练习 题 

: 提供 配套 多 媒体 教学 视频 

: 提供 QQ 群 E4mail 和 论坛 各 疑 服务 


清华 大 学 出 版 社 


零点 起 飞 学 编程 


2 5 学 出 版 社 
4 HG HH LGA 5 


内 容 简 介 


本 书 系统 地 介绍 了 网 站 制作 中 各 种 常用 的 HIML 标签 和 CSS 属性 ， 以 及 网 站 各 个 部 分 和 各 种 布局 的 
实现 方法 , 还 提供 了 大 量 实例 来 引导 读者 学 习 , 力求 让 读者 获得 真正 实用 的 知识 。 本 书 涉及 面 广 , 从 HIML 
到 CSS 样式 ， 再 到 脚本 语言 ， 涵 盖 网 站 开发 的 很 多 重要 知识 。 本 书 附带 1 张 光 盘 ， 收 录 了 本 书 配套 多 媒 
体 教学 视频 及 涉及 的 源 文件 ， 便 于 读者 高 效 、 直 观 地 学 习 。 

全 书 共有 21 章 , 分 为 3 篇。 第 1 篇 讲解 了 网 站 开发 基础 、 超 链接 、 图 像 、 表 格 、 多 媒体 元 素 、 框 架 、 
列表 、 表 单 ， 第 2 篇 讲解 了 CSS 样式 、 属 性 、 脚 本 、 事 件 ; 第 3 篇 讲解 了 网 站 开发 实例 ， 详 细 介 绍 了 创 
建 博 客 的 过 程 和 方法 ， 以 及 网 站 常用 模块 的 设计 方法 ， 让 读者 通过 实例 来 提高 实战 水 平 。 

本 书 适合 所 有 想 学 习 HTML 与 CSS 网 站 开发 技术 的 初 、 中 级 读者 快速 入 门 ， 也 适合 大 中 专 院 校 的 师 
生 和 培训 班 的 学 员 作为 教材 使 用 。 
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随 着 Web 技术 的 不 断 发 展 ， 网 站 越 来 越 成 为 人 们 浏览 信息 的 一 个 重要 媒介 。 同 样 地 ， 
随 着 网 站 的 兴起 ， 越 来 越 多 的 人 开始 关注 网 站 的 开发 。 如 今 互联 网 已 经 从 Web 1.0 向 Web 
2.0 过 渡 了 ， 传 统 的 使 用 表格 布局 的 页 面 带 来 的 缺点 表现 得 越 来 越 明 显 了 。 随 着 Web 2.0 
的 发 展 ， 使 用 HTML 和 CSS 进行 网 页 布局 的 技术 显得 越 来 越 重 要 ， 而 且 这 也 将 会 是 未 来 
发 展 的 趋势 。 

作为 网 站 制作 人 员 的 必修 课 ， 笔 者 结合 自己 多 年 的 网 站 开发 经 验 和 心得 体会 ， 精 心 编 
写 了 本 书 。 通 过 系统 的 讲解 和 详细 的 示例 ， 相 信和 能 使 对 网 页 设计 有 兴趣 的 读者 成 为 专业 人 
士 。 希 望 各 位 读者 能 在 本 书 的 引领 下 成 为 一 名 网 站 制作 的 高 手 。 本 书 结合 目前 流行 的 网 站 制 
作 实 例 ， 深 入 浅 出 地 讲解 了 网 站 制作 中 经 常 要 用 到 的 各 种 HIML 标签 和 CSS 样式 的 属性 ， 
并 以 大 量 实例 贯穿 于 全 书 的 讲解 之 中 ， 最 后 还 详细 介绍 了 博客 网 站 的 开发 实例 ， 使 读者 在 实 
战 中 更 深入 地 了 解 网 站 的 开发 。 学 习 完 本 书后 ， 读 者 应 该 可 以 具备 独立 开发 网 站 的 能 力 。 


本 书 有 何 特色 


1. 配 多 媒体 教学 视频 
本 书 提供 配套 的 多 媒体 教学 视频 辅助 教学 ， 高 效 、 直 观 ， 学 习 效果 好 。 
2. 门槛 低 ， 容 易 入 门 


本 书 选取 了 网 页 开发 最 常见 的 技术 进行 讲解 ， 不 要 求 读者 有 太 多 基础 ， 只 要 读者 熟悉 
Windows 操作 系统 即 可 顺利 学 习 本 书 内 容 。 


3. 内 容 全 面 、 系 统 


本 书 详细 介绍 了 网 站 开发 所 需要 的 知识 ， 包 括 HTML、CSS、 脚 本 语言 等 ， 使 读者 可 
以 全 面 了 解 网 站 开发 所 需 的 知识 。 


4. 讲解 由 浅 入 深 ， 循 序 渐进 


本 书 的 编排 采用 循序 渐进 的 方式 ， 内 容 梯度 从 易 到 难 ， 讲 解 由 浅 入 深 ， 适合 各 个 层次 
的 读者 阅读 ， 并 均 有 所 获 。 


5. 写作 细致 ， 处 处 为 读者 着 想 


本 书 内 容 编排 、 概 念 表述 、 语 法 讲解 、 示 例 讲解 、 源 代 注 释 等 都 很 细致 ， 作 者 讲解 时 
不 厌 其 烦 ， 细 致 入 微 ， 将 问题 讲解 得 很 清楚 ， 扫 清 了 读者 的 学 习 障 得 。 
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6. 贯穿 大 量 的 开发 实例 和 技巧 


本 书 在 讲解 知识 点 时 贯穿 了 大 量 短小 精 悍 的 典型 实例 ， 并 给 出 了 大 量 的 开发 技巧 ， 力 
求 让 读者 获得 真正 实用 的 知识 。 


7. 给 出 了 综合 项 目 案例 


本 书 在 最 后 3 章 以 实例 的 形式 详细 介绍 了 HTML+CSS 网 站 制作 的 过 程 ， 使 读者 更 为 
直观 地 了 解 网 站 的 制作 技巧 。 


8， 提 供 教学 PPT， 方 便 老师 教学 

本 书 适合 大 中 专 院 校 和 职业 学 校 作为 职业 技能 的 教学 用 书 , 所 以 专门 制作 了 教学 PPT， 
以 方便 各 院 校 的 老师 教学 时 使 用 。 
本 书 内 容 安排 


第 1 篇 HTML 网 站 开发 (第 1~11 章 ) 


本 篇 主要 内 容 包 括 : 网 站 开发 基础 、HTML 基础 、 网 站 中 的 文本 样式 标签 、 超 链接 、 
图 像 的 使 用 、 表 格 的 使 用 、 多 媒体 元 素 、 框 架 、 列 表 元 素 、 表 单元 素 、 网 站 布局 。 通 过 本 
篇 的 学 习 ， 读 者 可 以 对 HTML 语言 有 更 深入 的 了 解 ， 为 网 页 的 结构 制作 打下 坚实 的 基础 。 


第 2 篇 CSS 样式 (第 12 一 18 章 ) 

本 篇 主要 内 容 包 括 : CSS 样式 基础 知识 、CSS 背景 属性 、 文 本 属性 、 边 框 属性 、 列 表 
属性 、CSS 伪 类 和 伪 元 素 、 脚 本 、 事 件 、 语 法 规范 和 文档 类 型 声明 、XHTML 模块 化 和 结 
构 化 。 通 过 本 篇 的 学 习 ， 读 者 可 以 掌握 使 用 CSS 对 网 站 进行 布局 的 方法 。 


第 3 篇 网 站 开发 实例 (第 19 一 21 章 ) 

本 篇 主要 内 容 包括 : 博客 雏形 设计 实例 、 网 站 常用 模块 实例 以 及 完整 博客 网 站 的 设计 。 
通过 本 篇 的 学 习 ， 读 者 可 以 全 面 应 用 前 面 章节 所 学 的 开发 技术 进行 网 站 的 开发 ， 达 到 可 以 
独立 开发 网 站 的 水 平 。 

本 书 光盘 内 容 


口 本 书 重点 内 容 的 配套 教学 视频 ; 
口 本 书 实例 涉及 的 源 代码 。 


本 书 读者 对 象 


口 HTML 与 CSS 入 门人 员 ; 
口 网 页 专业 设计 人 员 ; 


前 言 


网 页 维护 人 员 ; 

网 站 建设 和 开发 人 员 ; 
网 站 制作 爱好 者 ; 

网 站 制作 培训 机 构 人 员 ; 
大 中 专 院 校 的 学 生 。 


DOODODO 


本 书 阅读 建议 


口 建议 没有 基础 的 读者 ， 从 前 之 后 顺 次 阅读 ， 尽 量 不 要 跳跃 。 

口 书 中 的 实例 和 示例 建议 读者 都 要 亲自 上 机 动手 实践 ， 学 习 效 果 更 好 。 

口 课 后 习题 都 动手 做 一 做 ， 以 检查 自己 对 本 章 内 容 的 掌握 程度 ， 如 果 不 能 顺利 完成 ， 
建议 回 过 头 来 重新 学 习 一 下 本 章 内 容 。 

口 学 习 每 章 内 容 时 ， 建 议 读者 先 仔细 阅读 书 中 的 讲解 ， 然 后 再 结合 本 章 教学 视频 ， 
学 习 效 果 更 佳 。 


本 书 作者 


本 书 由 项 宇 峰 主 笔 编 写 。 其 他 参与 编写 的 人 员 有 上 毕 梦 飞 、 葡 成 立 、 陈 涛 、 陈 晓 莉 、 陈 
燕 、 崔 栋 栋 、 冯 国良 、 高 岱 明 、 黄 成 、 黄 会 、 纪 人 奎 秀 、 江 莹 、 靳 华 、 李 闭 、 李 胜 君 、 李 雅 
娟 、 刘 大 林 、 刘 囊 萍 、 刘 水 珍 、 马 月 桂 、 闵 智和 、 秦 兰 、 汪 文 君 、 文 龙 、 陈 冠军 、 张 昆 。 

阅读 本 书 的 过 程 中 车 有 疑问 ， 请 和 我 们 联系 。 请 发 E-mail 到 book@wanjuanchina.net 
或 bookservice2008@163.com， 或 者 到 www.wanjuanchina.net 的 图 书 论坛 上 留言 ， 以 获得 
帮助 。 
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第 1 篇 HTML 网 站 开发 


网 站 开发 基础 ( 所 ”教学 视频 : 23 分钟) - 
网 站 的 基本 概念 … 
网 站 的 基本 架构 … 
ee ee ert ee eerie ee 4 
1.3.1 Web 浏览 器 标准 … 
1.3.2 常见 Web 浏览 器 
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22 


2.3 


2.4 


1.4.1 了 解 HIML 和 XHTML 
1.4.2 HTML 和 XHTML 的 编辑 工具 … 
常见 颜色 单位 
常见 ASCII 代 在 
常见 长 度 单位 …… 
本 章 小 结 


HTML 基础 ( 朱 ” 教学 视频 35 分 铬 ) seaeaaaasaakeeeeastuaaaaaaaataaedin 11 


HTML 页 面 结构 
2.1.1 <html> 元 素 … 
2.1.2 ” 头 部 元 素 <head>… 
2.1.3 主体 元 素 <body> 
2.1.4 ”标题 元 素 <title> 
元 信息 标签 <meta> 


2.2.2 HTTP 标题 信息 http-equiv- 
段落 排版 标签 
2.3.1 段落 标签 <p>… 


2.3.2 ”换行 标签 <br>… 15 
水 平分 隔 线 <hr>- 16 
2.4.1 插入 水 平分 隔 线 <hr> 


2.4.2 设置 水 平分 隔 线 粗细 一 
2.4.3 设置 水 平分 隔 线 长 度 
2.4.4 设置 水 平分 隔 线 显示 位 置 - 
2.4.5 设置 水 平分 隔 线 颜 色 
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3.3 


3.4 


3.5 


3.6 
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2.4.6 取消 水 平分 隔 线 阴影 - 


设置 网 站 背景 色 
结束 标签 … 


网 站 中 的 文本 样式 标签 ( 贿 ” 教 学 视频 : 43 分 钟 ) … 
设置 标题 字体 … 
设置 网 页 文字 样式 
3.2.1 设置 文本 大 小 … 
3.2.2 ”设置 文本 字体 
文本 布局 标签 
3.3.1 缩 进 标签 <blockquote>… 
3.3.2 ”保留 格式 标签 <pre> … 
3.3.3 ”使 用 内 联 行 <span> 
基于 物理 样式 的 文本 标 
3.4.1 加 粗 标签 <b> 
3.4.2 ”斜体 标签 <i> 
3.4.3 ”下划线 标签 <u>/<ins> 
3.4.4 删除 线 标签 <del>/<s> 
3.4.5 等 宽 字体 效果 <tt> 
3.4.6 ”设置 上 标 <sup>… 
3.4.7 设置 下 标 <sub>… 
基于 逻辑 样式 的 文本 标签 
3.5.1 引用 标签 <samp> 
3.5.2 ”变量 名 称 定义 标签 <var> 
3.5.3 ”文献 参考 标签 <cite> 
3.5.4 设置 小 号 字体 <small> 
3.5.5 ”设置 大 号 字体 <big>… 
本 章 小 结 … 


本 章 习 题 … 
超 链接 ( 杀 “ 教学 视频 : 22 分 钟 ) 39 
创建 超 链接 … 入 


4.3 


4.4 
4.5 


4.2.1 连接 到 同一 页 面 其 他 位 置 … 
4.2.2 ”本 地 相对 路 径 …………… 
4.2.3 空间 网 址 绝对 路 径 : URL 
村 
43.1 在 新 窗口 打开 blank… 
4.3.2 在 父 窗口 中 打开 _parent 
4.3.3 在 当前 窗口 中 打开 _self- 
43.4 在 整个 窗口 中 打开 top- 
本 章 小 结 … 
本 章 习 题 … 
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6.3 


6.4 


图 像 的 使 用 ( 所 ”教学 视频 : 47 分 钟 ) 


设置 背景 图 像 … 
图 像 标签 <img> 
5.3.1 选择 路 径 src- 
5.3.2 
5.3.3 ”图 片 宽度 width… 
5.3.4 图 片 高 度 height- 
5.3.5 图 片 排版 align… 
5.3.6 设 定 边框 border- 
5.3.7 ”图像 间距 
图 像 超 链接 

5.4.1 本 地 图 像 链 接 … 
5.4.2 ”站 外 图 像 链 接 … 
5.4.3 ”创建 图 像 矩 形 
5.4.4 创建 图 像 圆 形 
5.4.5 创建 图 像 多 边 
5.4.6 图 像 占 位 符 
插入 视频 文件 … 


本 意 小 结 … 6 
本 章 习题 一 6 
表格 的 使 用 ( 锚 ” 教 学 视频 :58 分 钟 ) 

表格 的 基本 构成 


设置 表格 <table> 
6.2.1 设置 行 标签 <tr> 
6.2.2 ”设置 列 标签 <td> … 


6.2.3 设置 表 头 单元 格 <th> - 


6.3.1 表格 宽度 width… 
6.3.2 表格 高 度 height- 
6.3.3 设置 背景 图 片 background- 
6.3.4 表格 间距 cellspacing……… 
6.3.5 设置 单元 格 内 的 距离 cellpadding 


6.4.1 边框 宽度 border- 
6.4.2 边框 颜色 bordercolor 
6.4.3” 亮 边框 颜色 bordercolorlight 
6.4.4 ”有 瞳 边 框 颜 色 bordercolordark 
6.4.5 不 显示 外 边框 void… 
6.4.6 显示 上 下 边框 hsides- 
6.4.7 显示 左右 边框 vsides- 
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第 1 章 网 站 开发 基础 


建立 网 站 是 宣传 自己 、 发 布 信息 的 有 效 手 段 。 因 此 网 站 的 建设 越 来 越 被 人 们 关注 ， 要 
学 好 制作 网 站 ， 首 先 就 要 了 解 网 站 的 开发 基础 。 本 章 将 会 详细 讲解 网 站 开发 的 基础 知识 ， 
包括 网 站 的 基本 概念 、 编 辑 网 页 需要 用 到 的 语言 以 及 常见 的 一 些 颜 色 单位 、 长 度 单位 等 。 


1.1 网 站 的 基本 概念 


网 站 是 按照 一 定 的 规则 , 使 用 HTML 等 工具 制作 的 用 于 展示 特定 内 容 的 相关 网 页 的 集 
合 。 网 页 是 指 在 浏览 器 上 进入 一 个 网 址 后 ， 看 到 的 浏览 器 上 的 页 面 。 网 页 是 由 文字 、 图 片 、 
声音 等 多 媒体 通过 超 链 接 的 方式 有 机 地 组 合 起 来 的 。 这 样 说 或 许 会 有 点 难以 理解 ， 下 面 我 
们 来 举例 说 明 。 

大 家 都 知道 新 浪 这 个 网 站 ， 在 浏览 器 里 输入 网 址 ，http://www.sina.com/。 这 时 就 可 以 
看 到 一 个 画面 ， 这 个 画面 就 是 一 个 网 页 。 无 论 它 有 多 长 ， 它 都 是 一 个 网 页 。 在 新 浪 里 ， 可 
以 很 形象 地 看 到 ， 网 页 包括 各 式 各 样 丰富 的 内 容 ， 包 括 文本 、 表 格 、 图 片 、 动 画 、 音 频 等 。 

【示例 1.1】 下 面 给 出 了 在 浏览 器 里 看 到 的 网 页 ， 如 图 1.1 所 示 。 
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图 1.1 网 页 效果 图 
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名 说明: 在 新 浪 里 ， 可 以 看 到 许多 各 式 各 样 的 内 容 ， 只 要 是 在 http://www.sina.com/ 这 个 网 
址 上 的 ， 都 是 属于 新 浪 的 网 站 。 


1.2 网 站 的 基本 架构 


内 容 、 页 面 、 超 链接 是 一 个 网 站 具备 的 基本 要 素 。 内 容 是 网 站 的 主要 部 分 ， 是 用 来 丰 
富 网 站 的 ， 页 面 是 用 来 存放 内 容 的 ， 一 个 页 面 可 以 存放 一 个 内 容 ， 也 可 以 存放 多 个 内 容 ; 
超 链接 是 用 来 把 多 个 页 面 链接 起 来 ， 形 成 一 个 完整 的 网 站 。 

【示例 1.2】 下 面 给 出 了 一 个 网 站 的 基本 构架 ， 如 图 1.2 所 示 。 
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图 1.2 网 站 基本 架构 示意 图 


如 上 图 所 示 ， 一 个 网 站 可 以 包含 多 个 网 页 ， 一 个 网 页 又 可 以 包含 多 个 内 容 。 网 页 之 间 
通过 超 链 接连 接 起 来 就 形成 了 一 个 网 站 。 

网 页 包括 静态 页 面 和 动态 页 面 。 很 多 人 都 认为 ， 静 态 页 面 就 是 网 页 上 的 东西 不 会 动 ， 
动态 页 面 就 是 网 页 上 的 东西 是 会 动 的 ， 这 种 观点 是 错误 的 。 所 谓 静态 页 面 ， 是 指 网 页 上 的 
内 容 无 法 自动 更 新 ， 要 通过 手动 在 网 页 的 代码 里 添加 修改 。 一 般 网 页 后 级 是 .html 和 .htm 的 
属于 静态 页 面 。 下 面 通过 例子 来 说 明 静 态 网 页 的 格式 。 

【示例 1.3】 下 面 给 出 了 静态 网 页 的 格式 ， 如 图 1.3 所 示 。 

动态 页 面 是 指 网 页 上 的 内 容 可 以 自动 更 新 ， 不 用 手动 在 网 页 的 代码 里 添加 和 修改 。 

页 名 后 级 除了 .html 和 .htm 之 外 可 以 浏览 的 大 多 属于 动态 页 面 ， 像 后 缀 是 .asp 和 . ww 
下 面 通过 例子 说 明 动 态 网 页 的 格式 。 
【示例 1.4】 下 面 给 出 了 动态 网 页 的 格式 ， 如 图 1.4 所 示 。 


ER | ASP 国 人 
SE€ 小 
ee 


图 1.3 静态 网 页 格式 图 1.4 动态 网 页 格式 
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1.3 Web 浏览 器 


Web 浏览 器 中 文 名 称 是 网 络 浏览 器 或 网 页 浏览 器 ， 是 用 来 浏览 网 站 的 一 个 工具 。Web 
全 称 为 World Wide Web, 缩写 WWW, 中 文 名 字 为 万 维 网 。 当 我 们 在 输入 网 址 时 可 以 发 现 ， 
几乎 所 有 的 网 址 前 面 都 是 以 www 开头 的 ， 也 就 是 说 这 类 网 址 是 通过 万 维 网 协议 的 网 站 。 
当然 ，Web 浏览 器 不 仅 可 以 浏览 网 站 ， 还 可 以 浏览 本 地 的 图 片 或 页 面 等 。 


1.3.1 Web 浏览 器 标准 


无 论 做 什么 事情 都 需要 标准 ， 玩 游戏 有 游戏 规则 ， 上 班 有 员工 守则 ， 网 站 也 不 例外 。 
由 于 浏览 器 有 很 多 不 同 的 版 本 ，Web 设计 师 常常 需要 为 多 版 本 多 浏览 器 的 开发 制作 而 莹 
恼 。 为 了 解决 这 个 问题 ， 提 出 了 Web 标准 。Web 标准 是 在 W3C (万 维 网 联盟 ) 的 组 织 下 
建立 起 来 用 来 规范 页 面 的 一 个 标准 。 使 用 Web 标准 制作 的 网 页 ， 可 以 使 页 面具 有 更 好 的 扩 
展 性 和 间接 性 ， 可 以 完成 页 面 结构 与 表现 的 分 离 。Web 标准 是 网 站 所 有 标准 的 集合 ， 包 括 
结构 、 表 现 和 行为 三 部 分 。 其 具体 内 容 如 下 : 

1， 结构 标准 语言 


在 Web 标准 中 规定 的 结构 标准 语言 有 两 种 : 一 种 为 XML 语言 ,一 种 为 HIML 语言 (将 
在 下 一 节 进 行 讲解 ) 。 


2. 表现 标准 语言 


在 Web 标准 中 ， 表 现 标 准 语言 使 用 CSS， 目 前 推荐 使 用 的 是 W3C 制定 的 CSS2。 使 
用 CSS 与 HTML 结构 语言 相 结合 ， 能 够 实现 网 页 表现 与 结构 相 分 离 ， 对 网 站 的 维护 和 管 
理 等 都 带 来 了 极 大 的 方便 。 

3. 行为 标准 

在 Web 标准 中 ， 行 为 标准 分 为 两 个 部 分 : 一 部 分 是 DOM， 另 一 部 分 为 ECMAScript。 
使 用 Web 标准 中 提供 的 行为 ， 可 以 很 好 地 完成 页 面 的 交互 ， 其 具体 内 容 如 下 . 

口 DOM: 是 Document Object Model (文档 对 象 模型 ) 的 缩写 。DOM 是 用 于 建立 网 
页 与 Script (或 程序 语言 ) 之 间 相 互 沟通 的 桥梁 ， 是 一 种 访问 网 页 中 标准 组 件 的 
方法 。 

口 ECMAScript: 是 ECMA (European Computer Manufacturers Association) 制定 的 标 
准 脚本 语言 ， 用 来 完成 页 面 的 交互 行为 。 

随 着 Web 的 不 断 壮 大 ， 使 得 更 多 的 人 觉得 越 来 越 有 必要 依靠 标准 实现 其 全 部 的 潜力 。 

让 设计 师 们 更 好 地 开发 制作 网 站 ， 减 少 不 必 要 的 维护 和 开发 时 间 。 在 本 书 的 讲解 内 容 里 
也 会 按照 Web 标准 来 对 每 个 内 容 进行 讲解 ， 以 提高 本 书 的 实用 性 。 


4。 
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1.3.2 常见 Web 浏览 


在 网 络 上 存在 着 各 式 各 样 的 很 多 浏览 器 ， 在 这 些 浏览 器 中 ， 有 几 个 是 主要 做 网 站 使 用 
的 标准 浏览 器 ， 包括 : 于、Firefox、Opera、Safari、Google Chrome 等 。 下 面 来 详细 介绍 这 
些 浏览 器 。 

1. Internet Explorer 功 


Intemet Explorer (IE) 是 微软 公司 推出 的 一 款 Web 浏览 器 ， 也 是 当今 最 流行 的 Web 
浏览 器 。 它 于 1995 年 诞生 于 世 ，1998 年 在 使 用 人 数 上 超过 了 Netscape。 正 浏览 器 到 目前 
为 止 ， 最 新 的 版 本 是 IE9。 


2. Firefox@ 


Firefox 是 由 Mozilla 发 展 而 来 的 新 式 浏览 器 。 它 诞生 于 2004 年 ， 越 来 越 多 的 人 使 用 ， 
使 它 成 为 因特网 上 第 二 大 最 流行 的 浏览 器 。Firefox 在 众多 浏览 器 中 属于 最 符合 Web 标准 
的 浏览 器 。 

3. OperaQ 


Opera 是 挪威 人 发 明 的 Web 浏览 器 。 它 快速 小 巧 、 符 合 工业 标准 、 适 用 于 多 种 操作 系 
统 ， 使 一 系列 小 型 设备 诸如 移动 电话 和 掌上 电脑 都 会 选择 它 作 为 Web 浏览 器 。 在 使 用 上 ， 
Opera 浏览 器 被 称 为 是 第 三 大 最 流行 的 浏览 器 , 它 的 兼容 性 好 , 是 接近 Web 标准 的 浏览 器 。 
4. Safar®@ 


Safari 是 苹果 Mac OS X 平台 的 Web 浏览 器 ， 它 是 荚果 公司 制作 出 来 的 Web 浏览 器 ， 
所 以 在 很 多 方面 , 它 都 不 像 上 面 所 说 的 那儿 种 浏览 器 。Safari 支持 Windows XP 和 Windows 
Vista 操作 系统 ， 这 也 使 得 用 Vista 系统 的 大 多 数 人 选择 使 用 Safari。 这 是 一 款 新 型 的 浏览 
器 ， 越 来 越 多 的 人 在 使 用 它 。 从 浏览 器 标准 上 看 ，Safari 有 自己 的 一 套 网 站 标准 ， 与 其 他 
浏览 器 不 同 ， 这 往往 也 造成 设计 师 为 了 网 站 能 兼容 Safari， 增 加 了 难度 。 

5. Google Chrome® 


中 文 名 为 “谷歌 浏览 器 ”， 是 一 个 由 Google 公司 开发 的 网 页 浏览 器 。 与 苹果 公司 的 
Safari 相 抗衡 ， 浏 览 速度 在 众多 浏览 器 中 走 在 前 列 ， 属 于 高 端 浏览 器 。 采 用 BSD 许可 证 授 
权 并 开放 源 代 码 ， 开 源 计划 名 为 Chromium。 该 浏览 器 是 基于 其 他 开放 原始 码 软件 所 撰写 ， 
包括 WebKit 和 Mozilla， 目 标 是 提升 稳定 性 、 速 度 和 安全 性 ， 并 创造 出 简单 且 有 效 的 使 用 
者 界面 。 


外 注意 : 现在 设计 师 们 检测 网 站 的 时 候 ， 一 般 会 用 三 、Firefox、Opera、Safari 这 4 个 浏览 
器 作为 标准 。 
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1.4 HTML 和 XHTML 


网 页 的 内 容 和 结构 是 利用 各 种 各 样 的 语言 来 进行 编写 的 。 其 中 , 最 为 基础 的 是 HTML、 
XHTML 语言 。 在 上 面 的 小 节 中 也 有 提 到 过 ，HTML 是 用 来 制作 静态 页 面 的 。XHTML 是 
HTML 的 升级 ， 更 加 符合 Web 标准 。 在 本 节 中 将 会 详细 介绍 HIML 和 XHTML 。 


1.4.1 了 解 HTML 和 XHTML 


HTML 英文 全 称 为 Hyper Text Markup Language， 中 文 名 称 为 超 文 本 标记 语言 。HTML 
是 一 种 标记 语言 ， 也 就 是 由 标记 标签 组 成 的 语言 ， 是 目前 网 络 上 应 用 得 最 广泛 的 语言 ， 也 
是 构成 网 站 页 面 的 主要 基本 语言 。 随 着 Web 技术 的 逐渐 成 熟 ， 到 了 HTML 4.01 这 一 代 已 
经 很 接近 Web 标准 了 。 

XHTML 英文 全 称 为 EXtensible HyperText Markup Language， 中 文 名 称 为 可 扩展 超 文 
本 标记 语言 。XHTML 是 一 种 为 适应 XML 而 重新 改造 的 HTML， 在 语法 上 更 加 严格 一 些 。 
比 起 HTML, 在 后 期 的 网 站 维护 扩展 上 , 能 更 好 地 省 力 省 时 地 做 好 网 站 的 维护 和 扩展 工作 。 
而 更 加 规范 的 语言 编写 使 XHTML 成 为 一 个 Web 标准 。 

XHTML 的 推出 是 用 来 取代 HTML 的 , 但 是 就 目前 的 状况 来 说 , 由 于 HTML 标记 语言 
的 使 用 已 经 根深 蒂 固 ， 所 以 现在 大 部 分 人 都 还 在 使 用 HIML， 只 是 让 HTML 更 加 规范 化 、 
标准 化 。 另 外 ，XHTML 与 HTML 4.01 几乎 是 相同 的 ， 这 也 让 XHTML 在 短 时 间 内 无 法 完 
全 取代 HIML。 


1.4.2 HTML 和 XHTML 的 编辑 工具 


用 于 HIML 和 XHTML 的 编辑 工具 有 很 多 ， 其 中 最 常用 的 就 是 Dreamweaver。 
Dreamweaver 被 人 们 认为 是 网 页 制作 的 三 剑客 之 一 。 使 用 Dreamweaver 进行 HIML 和 
XHTML 的 编辑 能 够 节省 网 站 开发 的 时 间 ， 提 高 工作 人 员 的 工作 效率 。 下 面 来 讲述 
Dreamweaver 的 使 用 方法 。 

打开 Dreamweaver 软件 ， 这 时 会 出 现 一 个 程序 启动 界面 。 页 面 分 为 三 栏 ， 第 一 栏 为 打 
开 最 近 项 目 ， 这 里 将 呈现 出 之 前 用 过 的 历史 页 面 。 最 下 面 的 “打开 ”， 是 打开 文件 夹 ， 选 
择 要 打开 的 页 面 。 第 二 栏 为 创建 新 项 目 ， 这 里 是 选择 要 编写 语言 的 环境 来 新 建 一 个 页 面 。 
本 书 讲述 的 是 HTML 方面 的 内 容 ， 这 时 应 该 选择 第 一 个 “HTML”。 第 三 栏 为 主要 功能 ， 
这 里 是 介绍 Dreamweaver 软件 自 带 的 功能 。 如 图 1.5 所 示 ， 给 出 了 打开 Dreamweaver 软件 
时 出 现 的 程序 启动 界面 (这 里 以 Dreamweaver CS6 为 例 ) 。 

在 “新 建 ” 里 面 选择 “HTML” 并 单 击 打 开 ， 就 会 进入 程序 工作 页 面 。 在 这 个 页 面 中 
可 以 采用 四 种 不 同 的 视图 方式 : 代码 视图 、 拆 分 视图 、 设 计 视 图 、 实 时 视图 。 这 里 设计 师 
通常 会 选择 代码 窗口 来 编写 代码 ， 然 后 用 设计 来 对 代码 效果 进行 查看 。 而 不 直接 选择 设计 
窗口 ， 用 自 带 的 插件 来 完成 页 面 的 制作 。 因 为 使 用 设计 窗口 来 设计 的 页 面 ， 往 往 会 产生 很 
多 的 废 代码 和 不 符合 Web 标准 的 代码 。 如 图 1.6 所 示 ， 给 出 了 程序 工作 页 面 。 


。6。 


第 1 章 ”网 站 开发 基础 


二 


打开 最 近 的 项 目 


[EE 


日 
日 
目 
茵 


bel 


在 网 站 中 ， 颜 色 的 应 上 


示例 11 .manifest 过 HIML 请 | CS6 新 增 功 能 概述 
示例 /8-3 html 时 ColdFusion 

cacheQs swapCache html 过 PEP 网 | 六 SR 布局 
wwwroot swapCache html 到 css 回 | Business Caalyst HfF 
示例 人 7-5 .html JavasSeript -一 - oy 

示例 7.6html 和 | CSS 过 浪 效果 面板 
wwwrootjs13js 同 流体 网 格 布局 图 | jQuery Mobile 色 板 
示例 /5j.manifest 而 Dreamweaver 站 点 ， n 
wwwroot/1js 唱 Business Catalyst 站 点 全 PhoneGap Build 面 板 
打开 . [= DD WsS.. 

快速 入 门 

新 增 功 能 y Dw 

资源 > 

Dreamweaver Exchange » 

不 再 显示 


图 1.5 ”Dreamweaver 程序 启动 界面 效果 图 


Dw Wm 0. &v 


文件 (月 ” 妨 强 (E) ”查看 (V) 插入 (1) 修改 (M) 栏 式 (0) 命令 (Q) ”站 点 (S) 宣 口 (W) 帮助 (H) 


[ISOlSlelm Ee rile[: lvlhlal:d 
四 


加 <!DOCTYPE heml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhetml1/DID/xhtmll-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 


Es <head> 
季 <mera htcp-equive"Content-Type" content="cext/hrml; charsec=utf-8" /> 
t <cicle> 无 标题 文档 </cicle> 
</head> 
2 
网 <body> 
</body> 
全 </hrml> 


《> HTL 目标 规则 “新 css 规则 > ~ | 字体 四 ) 默认 字体 -BIE 


[Bcss | 编辑 规则 ”][ Css 面板 F) ] 大 小 G) 无 - -四 
页 而 属性 列表 硕 目 


图 1.6 程序 工作 页 面 效 果 图 


1.5 常见 颜色 单位 


要 的 ， 一 些 好 的 网 站 ， 往 往 在 颜色 上 都 是 很 漂亮 的 。 每 


.IT。 
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个 颜色 都 有 一 个 唯一 的 单位 , 会 用 十 六 进 制 颜色 值 来 编写 , 想 在 网 页 中 里 显示 出 各 种 颜色 ， 


只 需要 在 代码 里 引用 相应 的 颜色 单位 就 可 以 了 。 下 面 我 们 来 列 出 一 些 常见 的 颜色 单位 ， 如 
表 1.1 所 示 。 
表 1.1 颜色 单位 表 

名 称 十 六 进 制 颜色 值 颜 色 
Aqua #00FFFF 浅 绿 色 
Black #000000 黑色 
Blue #0000FF 蓝 色 
Fuchsia #FOOFF 紫红 色 
Gray #808080 灰色 
Green #008000 绿色 
Lime #00FF00 淡 黄 绿色 
Maroon #800000 褐 紫红 色 
Navy #000080 深蓝 色 
Olive #808000 橄榄 色 
Purple #800080 紫色 

Red #FF0000 红色 
Silver #C0COCO 银灰 色 
Teal #008080 蓝 绿色 
White #FFFFFF 白色 
Yellow #FFFF00 黄色 


从 表格 中 可 以 看 到 一 些 常见 的 颜色 单位 ， 使 用 中 ， 都 会 使 用 十 六 进 制 颜色 值 来 填写 颜 
色 值 。 在 后 面 的 示例 中 ， 将 会 频繁 地 看 到 这 种 颜色 值 的 写法 。 

全 注意 : HTML 4.0 标准 仅 支持 16 种 颜色 名 ， 它 们 是 Aqua、Black、Blue、Fuchsia、Gray、 

Green、Lime、Maroon、Navy、Olive、Purmple、Red、Silver、Teal、White 和 Yellow。 


1.6 常见 ASCII 代码 


在 计算 机 中 ， 所 有 的 数据 在 存储 和 运算 时 都 要 使 用 二 进 制 数 表 示 。 而 具体 用 哪些 二 
进 制 数字 表示 哪个 符号 ， 为 了 使 通信 不 致 于 出 现 混乱 ， 那 么 大 家 就 必须 使 用 相同 的 
编码 规则 。 而 ASCII 代码 的 出 现 统一 规定 了 常用 符号 用 哪些 二 进 制 数 来 表示 。 下 面 给 
出 了 常见 的 ASCII 代码 编号 表 ， 如 表 1.2 所 示 。 


表 1.2 常见 的 特殊 符号 的 ASCII 代 码 表 


代 码 字 符 
33 a 
Ed 潜 
37 { 
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代 码 字符 
42 | 
48 { 
64 ak 
65 DEL 
90 ESC 
92 ( 
32 ) 
169 
表 中 ， 最 为 常用 的 是 @ 版 权 和 空格 ， 这 两 者 在 网 页 中 ， 几 乎 是 随处 可 见 的 。 
1.7 常见 长 度 单位 
长 度 单位 是 网 页 设计 中 最 常用 的 一 个 单位 。 在 编写 网 页 的 时 候 ， 为 了 让 整个 页 面 更 加 
漂亮 ， 在 设计 的 时 候 通 常 需要 为 元 素 的 位 置 、 尺 寸 精确 地 定义 一 些 值 ， 以 使 其 达到 预期 的 
效果 。 下 面 给 出 了 常见 的 长 度 单位 列表 ， 如 表 1.3 所 示 。 
表 1.3 常见 的 长 度 单位 列表 
单 位 描 述 
% 百分比 
in 英寸 
cm 厘米 
mm 毫米 
em lem 等 于 当前 的 字体 尺寸 ，2em 等 于 当前 字体 尺寸 的 两 倍 
ex -个 ex 既是 一 个 字体 的 x-height (x-height 通常 是 字体 尺寸 的 一 半 。) 
pt 磅 (1pt 等 于 1/72 英寸 ) 
pe 12 点 活字 (lpc 等 于 12 点) 


表 中 的 单位 ， 经 常 在 说 明 宽 度 和 高 度 的 单位 时 使 用 ， 在 后 面 的 例子 里 ， 会 经 常用 到 。 


外 技巧 : 设计 师 用 来 控制 框架 和 图 片 最 常用 的 单位 是 px， 控 制 字体 最 常用 的 单位 就 是 em。 
其 次 就 是 相对 的 单位 %。 


1.8 本 章 小 结 


本 章 详细 讲解 了 网 站 的 基本 知识 、Web 浏览 器 和 HTML 开发 工具 。 本 章 没有 什么 难点 ， 
都 是 开发 网 站 需要 了 解 的 最 基本 的 知识 。 通 过 本 章 的 学 习 ， 读 者 可 以 对 网 站 有 一 个 具体 的 
念 ， 并 掌握 网 站 的 基础 知识 ， 为 以 后 的 网 站 制作 做 铺垫 。 下 一 章 我 们 将 详细 讲解 网 站 的 
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基本 结构 和 基本 标签 。 
1.9 本 章 习 题 
【习题 1-1】 在 电脑 上 安装 Dreamweaver CS6 软件 ， 安 装 后 运行 Dreamweaver， 出 现 图 


1.6 所 示 的 运行 界面 。 
【习题 1-2】 创 建 一 个 静态 网 页 和 一 个 动态 网 页 ， 如 图 1.7 所 示 。 


ASP [em 
Wa A 
dongtai .asp jingtai.html 


图 1.7 静态 网 页 和 动态 网 页 
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在 上 一 章 我 们 已 经 了 解 了 HTML 是 制作 网 站 的 最 基础 的 语言 ， 因 此 要 制作 好 一 个 网 
站 ， 就 要 详细 地 了 解 HTML。 我 们 在 畅游 网 络 时 ， 通 过 浏览 器 看 到 的 网 页 就 是 由 HIML 语 
言 编写 的 。HTML 是 一 种 建立 网 页 文件 的 语言 ， 通 过 标记 式 的 指令 (Tag) 将 文字 、 图 片 、 
声音 、 视频 等 连接 并 显示 出 来 。 因此 对 于 网 站 设计 师 来 说 , 要 想 做 好 一 个 网 站 , 掌握 HTML 
标记 语言 是 最 基本 的 要 求 。 本 章 我 们 就 来 讲解 HTML 基础 ， 包 括 HTML 页 面 结构 和 它 的 
一 些 基本 标签 。 


2.1 HTML 页 面 结构 


HTML 页 面 结构 是 HTML 最 基本 的 内 容 。 一 个 完整 的 页 面包 括 四 个 部 分 : <html> 元 素 、 
头 部 元 素 、 主 体 元 素 、 标 题 元 素 。 下 面 我 们 来 详细 讲解 这 些 内 容 。 


2.1.1 <html> 元 素 


<html> 元 素 是 HTML 文档 中 必须 使 用 的 元 素 ， 用 来 标识 网 页 的 整体 内 容 ， 所 有 的 文档 


内 容 都 要 写 在 <html> 元 素 里 。 它 表示 该 网 页 是 以 超 文本 标识 语言 (HTML) 编写 的 ,， <html> 
元 素 语法 结构 如 下 所 示 : 
<html> 文 档 内 容 </html> <!-- 标识 网 页 的 整体 内 容 --> 


其 中 ，<html> 为 起 始 标签 ，</html> 为 结束 标签 。 有 了 起 始 标签 就 一 定 要 写 结束 标签 ， 
以 提高 网 站 的 完整 性 和 可 读 取 性 。 每 个 网 页 中 ， 包 含 的 内 容 都 要 写 在 起 始 标签 和 结束 标签 
之 间 。<html> 这 对 标签 的 开始 和 结束 ， 意 味 着 网 页 的 开始 和 结束 。 


2.1.2” 头 部 元 素 <head> 


<head> 元 素 也 是 HTML 文档 中 必须 使 用 的 元 素 , 是 网 页 的 头 部 标签 ,其 作用 是 定义 页 
面 头 部 的 信息 。 在 Web 浏览 器 中 ， 头 部 信息 是 不 被 显示 在 正文 中 的 。 在 <head> 标 签 中 可 以 
包含 标题 元 素 ， 来 说 明 网 页 的 标题 ， 也 可 以 包含 <meta> 元 素 〈 将 在 下 一 节 讲 解 ) 。<head> 
元 素 语 法 结构 如 下 所 示 : 

<head> 头 部 内 容 </head> <!-- 标识 网 页 的 头 部 标签 --> 


其 中 ，<head> 为 起 始 标签 ，</head> 为 结束 标签 。 紧 接着 <html> 标 签 下 来 就 是 <head> 
标签 。 虽 然 <head> 标 签 不 被 正文 显示 出 来 ， 但 是 它 包 含 很 多 重要 的 标记 。 浏 览 器 在 读 取 网 
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站 时 ， 都 会 从 <head> 读 起 。 


2.1.3 ”主体 元 素 <body> 


主体 元 素 <body> 为 网 页 的 正文 标签 ， 用 来 定义 页 面 所 有 显示 的 内 容 。 页 面 的 信息 主要 
通过 页 面 主体 元 素来 传递 。 写 在 <body> 标 签 里 的 内 容 都 会 被 浏览 器 显示 出 来 。<body> 标 签 
里 包括 许多 内 容 ， 以 后 要 讲 的 标签 里 ， 很 多 都 是 写 在 <body> 里 面 的 ，<body> 元 素 语法 结构 
如 下 所 示 : 

<body> 页 面 主 体 </body> <!-- 标识 网 页 的 正文 标签 --> 

其 中 ，<body> 为 起 始 标签 ，</body> 为 结束 标签 。<body> 标 签 写 在 <head> 标 签 下 面 ， 
而 </body> 闭 合 标签 后 面 就 是 <html> 闭 合 标签 


2.1.4 ”标题 元 素 <title> 


标题 元 素 <title> 写 在 <head> 标 签 里 面 ， 用 来 定义 页 面 的 标题 。 我 们 已 经 知道 在 <head> 
标签 里 的 内 容 不 被 正文 所 显示 ， 因 此 <title> 标 签 里 的 内 容 是 显示 在 浏览 器 窗口 的 标题 栏 里 
的 ，<title> 元 素 语 法 结构 如 下 所 示 : 


<title> 页 面 标题 </title> <!-- 标识 网 页 的 标题 标签 --> 

其 中 ，<title> 为 起 始 标签 ，</title> 为 结束 标签 

【示例 2.1】 下 面 是 <head> 标 签 里 标题 的 显示 效果 。 代码 如 下 : 

<title> 正 在 使 用 标题 title 元 素 </title> <!-- 标识 网 页 的 标题 标签 --> 

效果 如 图 2.1 所 示 。 在 打开 窗口 时 不 难 发 现 , 页 面 最 顶端 的 标题 栏 可 以 看 到 <title> 标 签 
的 显示 效果 。 


EEC “ 国 


文件 (篇 场 (5) 。 坦 看 (V) 收藏 闪 (A) 


图 2.1 标题 显示 效果 图 


2.2 元 信息 标签 <meta> 


元 信息 标签 <meta> 是 一 个 辅助 性 标签 ， 可 以 对 整个 页 面 进行 综合 性 的 设置 。 位 于 
HTML 文档 头 部 标签 <head> 和 标题 标签 <title> 之 间 ， 提 供 的 信息 是 用 户 看 不 见 的 。meta 标 
签 的 用 处 很 多 ， 通 常用 来 为 搜索 引擎 定义 页 面 主题 ， 还 可 以 用 于 设置 页 面 ， 使 其 可 以 根据 
定义 的 时 间 间 隔 刷新 页 面 等 。 这 些 作用 主要 通过 meta 的 两 种 属性 来 表示 : name 和 
http-equiv。 
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2.2.1 页 面 描 述 信 息 name 


name 属性 是 用 来 描述 网 页 , 以 便于 搜索 引擎 查找 、 分 类 。 这 其 中 最 重要 的 是 description 
(搜索 引擎 网 站 简介 ) 和 keywords 分 类 关键 字 ) ， 所 以 应 该 给 每 页 加 一 个 meta 值 。 这 样 
可 以 方便 每 个 页 面 都 被 准确 、 快 速 地 搜索 出 来 。name 属性 是 写 在 meta 标签 里 面 的 ，meta 
和 name 中 间隔 了 一 个 英文 的 空格 。 语 法 结构 如 下 所 示 : 


<meta name="#" contect=" 内 容 "> <!-- 描述 网 页 --> 


其 中 ，# 可 以 为 Generator、Keywords、Description、Author、Robots。 使 用 不 同 的 属性 
值 ， 对 应 的 contect 的 双 引号 里 填写 的 内 容 不 同 。 下 面 来 介绍 上 述 的 这 几 个 属性 值 : 

name="Generator" 用 来 说 明 网 页 生成 工具 (如 Microsoft FrontPage 4.0) 等 。 相 应 的 
contect 里 填写 网 页 所 生成 的 工具 。 语 法 结构 如 下 所 示 : 

<meta name="Generator" contect=" 网 页 生成 工具 "> ”<!-- 说 明 网 页 生成 工具 --> 

name="Keywords" 是 向 搜索 引 警 说 明 网 页 的 关键 词 。 相 应 的 contect 里 填写 网 页 想 被 搜 
索 到 的 其 他 关键 字 。 语 法 结构 如 下 所 示 : 

<meta name="Keywords" contect=" 网 页 关键 词 "> <!-- 向 搜索 引擎 说 明 网 页 的 关键 词 --> 

name="Description" 用 来 告诉 搜索 引擎 网 页 的 主要 内 容 。 相 应 的 contect 里 填写 网 页 所 
要 表达 的 主要 内 容 ， 不 宜 太 长 。 语 法 形式 如 下 所 示 : 

<meta name="Description" contect=" 网 页 主要 内 容 "> 

<!-- 告诉 搜索 引擎 网 页 的 主要 内 容 --> 

name="Author" 用 来 告诉 搜索 引擎 网 页 制作 的 作者 。 相 应 的 contect 里 填写 网 页 作者 的 
名 字 。 语 法 形式 如 下 所 示 : 

<meta name="Author" contect=" 作 者 名 字 "> <!-- 告诉 搜索 引擎 网 页 制作 的 作者 --> 

name-"Robots' 用 来 定义 网 页 的 检索 情况 和 网 页 上 的 连接 查询 情况 。 语 法 形式 如 下 所 示 ， 


<meta name="Robots" contect= "#"> 
<!-- 定义 网 页 的 检索 情况 和 网 页 上 的 连接 查询 情况 --> 

其 中 ，contect=" 扣 "里 面 可 以 替换 多 个 属性 值 来 设 定 不 同 的 检索 和 查询 情况 。 下 面 为 
contect="#" 里 面 的 多 个 属性 值 的 说 明 : 

口 all: 文件 将 被 检索 ， 且 页 面 上 的 链接 可 以 被 查询 ; 

口 none: 文件 将 不 被 检索 ， 且 页 面 上 的 链接 不 可 以 被 查询 ; 

口 index: 文件 将 被 检索 ; 

口 follow: 页 面 上 的 链接 可 以 被 查询 ; 

口 noindex: 文件 将 不 被 检索 ， 但 页 面 上 的 链接 可 以 被 查询 ; 

口 nofollow: 文件 将 不 被 检索 ， 页 面 上 的 链接 可 以 被 查询 。 


外 注意 : contect="# 中 ，# 里 面 只 能 为 一 个 属性 值 ， 不 能 填写 多 个 属性 值 . 
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2.2.2 ”HTTP 标题 信息 http-equiv 


http-equiv 和 HTTP 的 头 部 元 素 类 似 , 它 反馈 给 浏览 器 一 些 有 用 的 信息 , 来 帮助 页 面 正 
确 和 精确 地 显示 页 面 内 容 , 是 网 页 里 必 不 可 少 的 标签 属性 。 它 和 name 一 样 , 都 是 写 在 meta 
后 面 。 语 法 结构 如 下 所 示 : 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<!-- 说 明 网 页 制作 所 使 用 的 文字 以 及 语言 --> 
其 中 ，http-equiv="Content-Type" 设 定 页 面 使 用 的 字符 集 来 说 明 页 面 制作 使 用 的 文字 和 
语言 ，content="text/html;charset=gb2312" 指 明了 网 页 所 写 的 内 容 文 字 为 中 文 简体 ， 英 文 是 
ISO-8859-1 字符 集 。http-equiv 属性 除了 可 以 用 来 说 明 网 页 制作 所 使 用 的 文字 以 及 语言 
外 ， 还 有 其 他 的 别 的 属性 值 。 下 面 介绍 常用 的 几 种 属性 值 。 
http-equiv="Refresh" 是 用 来 定时 让 网 页 在 指定 的 时 间 内 ， 跳 转 到 指定 的 页 面 。 其 中 ，n 
是 网 页 指定 的 跳 转 时 间 ， 以 秒 来 计算 ， 由 设计 师 自己 设 定 。url 里 面 放 的 是 跳 转 的 页 面 ， 跳 
转 的 页 面 可 以 是 网 上 的 链接 ， 也 可 以 是 目录 下 的 页 面 链接 ， 由 设计 师 自 己 设 定 。 代 码 
如 下 : 
<meta http-equiv="Refresh" contect="n;url=http://www.souhu.com/"> 
<!-- 让 网 页 在 指定 的 时 间 内 ， 跳 转 到 指定 的 页 面 --> 
http-equiv="Expires" 是 用 来 指定 网 页 在 缓存 中 的 过 期 时 间 ， 一 旦 过 期 则 必须 到 服务 器 
上 重新 调用 。 需 要 注意 的 是 到 期 时 间 必 须 使 用 GMT 时 间 格 式 。 设 定 的 时 间 写 在 contect 里 
面 。 代 码 如 下 : 
<meta http-equiv="Expires" contect="Tus,12 May 2013 12:20:00 GMT"> 
<!-- 设 定 网 页 在 缓存 中 的 过 期 时 间 --> 
http-equiv="Pragma" 是 用 来 设 定 禁 止 浏览 器 从 本 地 机 的 缓存 中 调 阅 页 面 内 容 ， 设 定 后 
浏览 者 将 无 法 脱 机 使 用 该 页 面 内 容 。contect="no-cache" 是 固定 的 属性 值 ， 在 这 里 不 用 再 做 
其 他 设置 。 代 码 如 下 : 
<meta http-equiv="Pragma" contect="no-cache"> 
<!-- 设 定 禁 止 浏览 器 从 本 地 机 的 缓存 中 调 阅 页 面 内 容 --> 
http-equiv="set-cookie" 是 用 来 设 定 如 果 网 页 过 期 ， 存 盘 缓 存 ( 也 称 cookie) 将 被 删除 。 
需要 注意 的 是 contect 里 面 也 是 必须 使 用 GMT 时 间 格 式 。 设 定 的 时 间 写 在 contect 里 面 。 代 
人 码 如 下 : 
<meta http-equiv="set-cookie" contect="Tus,12 May 2013 12:20:00 GMT"> 
<!-- 设 定 如 果 网 页 过 期 , 存盘 缓存 (也 称 cookie) 将 被 删除 --> 
http-equiv="Window-target" 是 用 来 设 定 显示 窗口 的 ， 强 制 页 面 在 当前 窗口 以 独立 页 面 
显示 。Content=" top" 里 ， 还 可 以 有 _blank、_self、_parent 属性 值 ， 通 过 不 同 的 设置 来 设 定 
页 面 在 当前 窗口 的 哪个 位 置 出 现 。 具 体 的 属性 值 说 明 将 在 第 4 章 4.3 节 具 体 讲 述 。 代 码 
如 下 : 


<meta http-equiv="windows-Target" contect=" blank"> 
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<!-- 设 定 显示 窗口 的 ， 强 制 页 面 在 当前 窗口 以 独立 页 面 显示 --> 


全 技巧 : 通常 在 Dreamweaver 里 ,会 自动 生成 meta 标签 。 基 本 上 ， 我 们 使 用 meta 标签 最 
多 的 是 <meta http-equiv="Content-Type" content="text/html: charset=gb2312">。 


2.3 段落 排版 标签 


在 网 页 中 的 内 容 是 由 段落 组 合 而 成 的 。 要 想 使 网 页 中 的 文字 和 图 片 等 变 得 整齐 美观 ， 
可 以 使 用 段落 排版 标签 来 进行 排版 。 段 落 排版 标签 主要 有 段落 标签 和 换行 标签 。 


2.3.1 段落 标签 <p> 


<p> 标 签 为 段落 标签 ， 用 于 在 文字 、 表 格 、 图 片 之 间 留 一 空白 行 或 将 内 容 包 含 在 <p> 和 
</p> 之 间 构 成 一 个 段落 。<p> 标 签 是 双 标签 ， 有 起 始 标签 和 结束 标签 。 语 法 结构 如 下 所 示 : 

<p> 内 容 </p> <!-- 段 落 标签 --> 

其 中 ，<p> 为 起 始 标签 ，</p> 为 结束 标签 。 段 落 内 容 包含 在 <p> 标 签 里 面 。 

【示例 2.2】 下 面 是 <p> 标 签 的 具体 使 用 效果 ， 为 了 使 效果 更 加 明显 ， 这 里 在 段落 外 加 
了 一 段 文 字 ， 代 码 如 下 : 


<p> 从 这 里 开始 使 用 段落 标签 </p> <!-- 增加 一 对 段落 标签 --> 
段落 标签 段落 标签 段落 标签 段落 标签 段落 标签 段落 标签 段 沙 标 签 


效果 如 图 2.2 所 示 。 


全 富 C 从 [Dfiley//Fybj/ 开 级 /好 | 三 


从 这 里 开始 使 用 段落 标签 


段落 标签 段落 标签 段落 标签 段落 标 


图 2.2 <p> 标 签 使 用 效果 图 


2.3.2 换行 标签 <br> 


<br> 标 签 是 换行 标签 ,如果 希望 另 起 一 行书 写 文字 而 又 不 希望 另 起 一 个 自然 段 的 时 候 ， 
就 可 以 使 用 换行 标签 。<br> 标 签 是 个 单 标签 ， 需 要 加 上 一 个 “/” 来 关闭 。 使 用 一 个 <be> 换 
行 一 次 ， 要 想 使 用 多 次 换行 可 以 使 用 多 个 <br>。 两 个 <br> 标 签 生成 的 换行 效果 和 <p> 段 落 
标签 的 浏览 效果 是 一 样 的 。 区 别 在 于 <br> 标 签 可 以 同时 加 入 几 个 ， 而 <p> 标 签 不 行 。<br> 
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标签 是 写 在 <body> 标 签 里 面 的 。 

【示例 2.3】 下 面 是 <br> 标 签 的 具体 使 用 效果 ， 为 了 使 效果 更 加 明显 ， 这 里 用 一 个 <br/> 
标签 和 两 个 <br/> 标 签 做 比较 ， 代 码 如 下 : 

从 这 里 开始 <br/> <! 一 -增加 一 个 换行 标签 ， 文 字 将 在 这 里 换行 --> 


换 一 行 显示 <br/><br/> <!-- 增 加 两 个 换行 标签 --> 
换 两 行 显示 


效果 如 图 2.3 所 示 。 


Lo mc) 


¢ CRIOW| A 


从 这 里 开始 
换 一 行 显示 


换 两 行 显示 


图 2.3 ”<br/> 标 签 使 用 效果 图 


外 技巧 : 一 般 为 了 视觉 效果 更 好 一 些 ， 设 计 师 会 用 两 个 <br/> 标 签 来 隔 开 两 段 文 字 。 这 样 可 
以 让 段落 变 得 更 加 明显 。 虽 然 <br/> 标 签 没有 段落 的 意思 ， 但 是 设计 师 把 <br/> 标 
签 分 隔 出 来 的 文字 当做 段落 来 使 用 。 


2.4 水 平分 隔 线 <hr> 


<hr> 称 为 水 平分 隔 线 。 当 页 面 内 容 比较 繁琐 时 ， 使 用 它 在 段 与 段 之 间 插 入 一 条 水 平分 
隔 线 来 使 页 面 显得 层次 分 明 ， 既 美观 又 便于 阅读 。 本 节 我 们 将 详细 讲解 如 何 设置 水 平分 
割 线 。 


2.4.1 插入 水 平分 隔 线 <hr> 


<hr> 标 签 是 用 来 插入 水 平分 隔 线 的 。<hr> 标 签 是 单 标签 ， 它 没有 闭合 标签 ， 所 以 需要 
加 上 一 个 “/” 来 关闭 ， 和 换行 标签 <br> 的 使 用 方法 一 样 。 

【示例 2.4】 下 面 是 <hr> 标 签 的 使 用 效果 ， 为 了 使 效果 更 加 明显 ， 这 里 在 <hp> 标 签 上 、 
下 各 插入 一 段 文 字 ， 代 码 如 下 : 

从 这 里 开始 制作 水 平分 隔 线 


<hr/> <!-- 增加 水 平 线 标签 --> 
水 平分 隔 线 显 示 


效果 如 图 2.4 所 示 。 


2 
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从 这 里 开始 制作 水 平分 隔 线 
水 平分 隔 线 显示 


图 2.4 <hr> 标 签 使 用 效果 图 


2.4.2 ”设置 水 平分 隔 线 粗细 


设置 水 平分 隔 线 的 粗细 可 以 使 用 size 属性 。 在 不 写 size 属性 值 的 情况 下 ， 默 认为 2px。 


size 属性 写 在 <hr> 标 签 里 面 ， 中 间 用 一 个 英文 的 空格 隔 开 。 


【示例 2.5】 下 面 是 <hr/> 标 签 里 size 属性 的 使 用 效果 ， 代 码 如 下 : 


从 这 里 开始 设置 水 平分 隔 线 

<hr/> <!-- 增加 水 平分 隔 线 标签 --> 
设置 水 平分 隔 线 粗细 为 8px 

<hr size="8px" /> <!-- 增加 8px 粗 的 水 平分 隔 线 --> 
设置 水 平分 隔 线 粗 为 16px 

<hr size="16px" /> <!-- 增加 16px 粗 的 水 平分 隔 线 --> 
设置 水 平分 隔 线 


效果 如 图 2.5 所 示 。 


癌 HTML 天 磺 x Ww I Rg 
全 全 C 省 | 口 fle//FVbj/ 升 级 堆 点 灾 | 三 | 


从 这 里 开始 设置 水 平分 隔 线 
设置 水 平分 隔 线 粗细 为 8px 


设置 水 平分 隔 线 粗 为 16px 


设置 水 平分 隔 线 


图 2.5 <hr> 标 签 里 size 属性 值 使 用 效果 图 


2.4.3 ”设置 水 平分 隔 线 长 度 


设置 水 平分 隔 线 的 长 度 可 以 使 用 width 属性 。 在 不 写 width 属性 值 的 情况 下 ， 默 认为 


100%， 即 水 平分 隔 线 效 果 会 一 直 延 长 到 网 页 的 两 边 。width 属性 同样 写 在 <hr> 标 签 里 面 ， 
中 间 用 一 个 英文 的 空格 隔 开 。 


【示例 2.6】 下 面 是 <hr/> 标 签 里 width 属性 的 使 用 效果 ， 代 码 如 下 : 


Ly 
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设置 水 平分 隔 线 长 度 

<hr/> <!-- 增加 水 平分 隔 线 --> 

设置 水 平分 隔 线 的 长 度 为 100px 

<hr width="100pzx"/> <!-- 增加 长 为 100px 的 水 平分 隔 线 --> 
设置 水 平分 隔 线 的 长 度 为 300px 

<hr width="300px"/> <!-- 增加 长 为 300px 的 水 平分 隔 线 --> 
设置 水 平分 隔 线 的 长 度 


效果 如 图 2.6 所 示 。 


DD HIM x 

4 全 C 本 Dfiley//F/bj/ 天 级 / 堆 让 起 飞 学 HTIYY| 三 
设置 水 平分 隔 线 长 度 

设置 水 平分 隔 线 的 长 度 为 100px 


设置 水 平分 隔 线 的 长 度 为 300px 
设置 水 平分 隔 线 的 长 度 


图 2.6 ”<hr 人 > 标签 里 width 属性 值 使 用 效果 图 


2.4.4 设置 水 平分 隔 线 显 示 位 置 


设置 水 平分 隔 线 的 显示 位 置 可 以 使 用 align 属性 。 在 不 写 align 属性 值 的 情况 下 ， 默 认 
为 居中 。align 属性 写 在 <hr> 标 签 里 面 ， 中 间 用 一 个 英文 的 空格 隔 开 。align 属性 有 三 个 值 ， 
分 别 是 : left 〈 居 左 ) 、center (居中 ) 、right〈 居 右 ) 。 

【示例 2.7】 下 面 是 <hr/> 标 签 里 align 属性 三 个 值 的 使 用 效果 ， 为 了 使 效果 更 加 明显 ， 
这 里 将 加 上 上 面 的 width 属性 ， 代 码 如 下 : 

设置 长 为 100px 的 水 平分 隔 线 的 显示 位 置 居 左 

<hr width="100px" align="left" /> <!-- 增加 长 为 100px 且 居 左 的 水 平分 隔 线 --> 

设置 长 为 300px 的 水 平分 隔 线 的 显示 位 置 居中 

<hr width="300px" align="center" /> <!-- 增加 长 为 300px 且 居 中 的 水 平分 隔 线 --> 

设置 长 为 400px 的 水 平分 隔 线 的 显示 位 置 居 右 


<hr width="200px" align="right" /> <!-- 增加 长 为 200px 且 居 右 的 水 平分 隔 线 --> 
设置 水 平分 隔 线 的 显示 位 置 


效果 如 图 2.7 所 示 。 


后 访 C 谷口 filey//F:/bj/ 天 级 / 零 志 起 飞 学 HTML+CSS/ 示 例 /第 2 章 /2.8.html 


设置 长 为 100px 的 水 平分 隔 线 的 显示 位 置 居 左 
设置 长 为 300px 的 水 平分 隔 线 的 显示 位 置 居中 


设置 长 为 400px 的 水 平分 隔 线 的 显示 位 置 居 右 
设置 水 平分 隔 线 的 显示 位 置 


图 2.7 <hr> 标 签 里 align 属性 值 使 用 效果 图 


第 2 章 HIML 基础 


2.4.5 ”设置 水 平分 隔 线 颜色 


设置 水 平分 阳线 的 颜色 可 以 使 用 color 属性 。 在 不 写 color 属性 值 的 情况 下， 边框 默 认 
为 浅 灰 色 #ACA899。color 属性 写 在 <hr/> 标 签 里 面 ， 中 间 用 一 个 英文 的 空格 隔 开 。 
【示例 2.8】 下 面 是 <hr/> 标 签 里 color 属性 的 使 用 效果 ， 代 码 如 下 : 


设置 水 平分 隔 线 的 颜色 
<hr/> <!-- 增加 水 平分 隔 线 --> 
设置 水 平分 隔 线 的 颜色 为 红色 
<hr color="#ff0000" /> <!-- 增加 颜色 为 红色 的 水 平分 隔 线 --> 
设置 水 平分 隔 线 的 颜色 为 黄色 
<hr color="#ffff00" /> <!-- 增加 颜色 为 黄色 的 水 平分 隔 线 --> 
设置 水 平分 隔 线 的 颜色 为 黑色 
<hr color="#ffff00" /> <!-- 增加 颜色 为 黄色 的 水 平分 隔 线 --> 
设置 水 平分 隔 线 的 颜色 
效果 如 图 2.8 所 示 。 
D HTML 到 世 x 


所 CG 覃 DD file:y///F:/bj/ 升 级 /零点 起 飞 学 HTML+CSS/ 示 例 /第 2Y? 三 
设置 水 平分 隔 线 的 颜色 
设置 水 平分 隔 线 的 颜色 为 红色 
设置 水 平分 隔 线 的 颜色 为 黄色 

设置 水 平分 隔 线 的 颜色 为 黑色 
设置 水 平分 隔 线 的 颜色 


图 2.8 ”<hr 人 > 标签 里 color 属性 值 使 用 效果 图 


全 注 意 : color="#ff0000" 虽 然 可 以 不 用 双 引 号 ,但 为 了 规范 写法 ， 必 须 习惯 使 用 了 双 引 号 。 


2.4.6 ”取消 水 平分 隔 线 阴影 


取消 水 平分 隔 线 的 阴影 可 以 使 用 noshade 属性 ,noshade 没有 属性 值 ， 使 用 它 就 说 明 要 
取消 水 平分 隔 线 阴 影 。 在 默认 情况 下 ， 水 平分 隔 线 是 有 阴影 的 。noshade 属性 写 在 <hr/> 标 
签 里 面 ， 中 间 用 一 个 英文 的 空格 隔 开 。 

【示例 2.9】 下 面 是 <hr/> 标 签 里 noshade 属性 的 使 用 效果 。 为 了 强化 效果 ， 这 里 使 用 了 
size 属性 对 取消 阴影 与 没有 取消 阴影 水 平 线 进行 对 比 ， 代 码 如 下 : 


没有 取消 阴影 的 水 平分 隔 线 

<hr size="8px" /> <!-- 增加 粗 为 8px 的 水 平分 隔 线 --> 

取消 水 平分 隔 线 的 阴影 

<hr size="8px" noshade /> <!-- 增加 粗 为 8px 且 无 阴影 的 水 平分 隔 线 --> 
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制作 水 平分 隔 线 
效果 如 图 2.9 所 示 。 


也 HTML 吾 对 
后 言 C 和 省 癌 file:///F:/bj/ 升 级 /零点 起 飞 学 HTML+CSS/ 示 例 /第 2Y? 三 


没有 取消 阴影 的 水 平分 隔 线 


r 
取消 水 平分 隔 线 的 阴影 


制作 水 平分 隔 线 


图 2.9 <hr 人 标签 里 noshade 属性 值 使 用 效果 图 


2.5 注释 标签 


HTML 语言 中 有 专门 的 注释 标签 <!-- -->， 可 以 在 源码 中 插入 注释 ， 注 释 内 容 不 会 显示 
在 浏览 器 中 。 使 用 <!-- --> 标 签 是 一 个 很 好 的 习惯 ， 有 时 候 代码 多 了 ， 我 们 就 会 态 记 之 前 写 
过 的 代码 的 含义 。 有 了 注释 我 们 就 可 以 很 方便 地 对 代码 进行 阅读 和 维护 ， 所 以 要 养 成 使 用 
<!-- --> 标 签 的 良好 习惯 ,注释 标签 语法 结构 如 下 : 

<!-- 注 释 内 容 --> 


在 这 里 ，<!-- --> 已 经 是 一 个 完整 的 标签 ，<!-- 为 开始 标签 ，--> 为 闭合 标签 。 在 
Dreamweaver 里 ， 注 释 的 内 容 会 呈现 出 灰色 ， 以 表示 正文 不 会 出 现 此 内 容 。 

【示例 2.10】 下 面 是 <!-- -> 标签 的 使 用 效果 ， 代 码 如 下 : 

下 面 是 注释 标签 ， 是 看 不 到 的 

<!-- 这 里 是 注释 内 容 --> 


效果 如 图 2.10 所 示 。 


二 会 CG 在 [OfileWcyusers 究 | 入 


下 面 是 注释 标签 ， 是 看 不 到 的 


图 2.10 <!-- -> 标签 使 用 效果 图 


外 注意 : <!-- -> 标签 在 左边 有 一 个 感叹 号 ， 但 是 在 右边 是 没有 的 。 


2.6 设置 网 站 背景 色 


如 果 想 改变 网 站 背景 色 ， 可 以 使 用 bgcolor 属性 来 设置 ， 它 的 取 值 可 以 是 十 六 进 制 颜 
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色 代码 。bgcolor 属性 用 于 对 页 面 整体 颜色 进行 控制 ， 从 而 达到 改变 背景 色 的 目的 。 
【示例 2.11】 下 面 是 bgcolor 属性 在 <body> 标 签 下 的 使 用 效果 ， 代 码 如 下 : 
<body bgcolor="#000000"> <!-- 增加 页 面 背景 颜色 为 黑色 --> 
使 用 背景 颜色 


<hr size="10px" color="#ffff00" /> <!-- 增加 粗 为 10px 且 颜 色 为 黄色 的 水 平分 隔 线 --> 
</body> 


效果 如 图 2.11 所 示 。 


CG 种 Ofile///C:/Users/yz 窑 a | 


图 2.11 bgcolor 属性 在 <body> 标 签 下 使 用 效果 图 


全 注意 ;bgcolor="#ffff00"， 颜 色 代 号 前 后 要 加 上 英文 的 双 引 号 


2.7 结束 标签 


在 前 面 已 经 提 到 过 任何 标签 都 要 加 结束 标签 的 ， 起 始 标 签 和 结束 标签 必须 是 一 起 的 。 
虽然 有 些 标签 不 加 关闭 标签 也 是 可 以 使 用 的 ， 但 是 | 

HTML 未 来 的 版 本 将 不 允许 省 略 任何 结束 标签 .通过 结束 标签 来 关闭 HIML 是 一 种 经 
得 起 未 来 考验 的 HTML 编写 方法 。 清 楚 地 标记 某 ri 哪里 开始 ， 并 在 哪里 结束 ， 不 论 
对 设计 者 还 是 对 浏览 来 说 ， 都 会 使 代码 更 容易 被 理解 。 这 种 良好 的 书写 习惯 ， 让 网 页 在 
浏览 器 里 更 能 体验 出 完整 性 和 规范 性 。 


外 技 巧 : 在 编写 每 个 标签 时 ， 在 写 下 起 始 标签 的 同时 ， 也 写 下 结束 标签 ， 这 样 就 不 会 在 编 
辑 过 程 中 ， 忘 了 写 结束 标签 了 。 


2.8 本 章 小 结 


本 章 主要 讲解 HTML 基础 ， 详 细 讲 解 了 HTML 的 页 面 结构 和 它 的 一 些 基本 标签 。 本 
齐 重 点 和 难点 在 于 读者 要 熟悉 各 个 标签 的 具体 用 法 。 通过 本 章 的 学 习 ， 大 家 可 以 对 HIML 
基础 有 比较 深 的 了 解 和 掌握 。 这 一 章 对 于 初学 者 来 说 是 很 重要 的 ， 它 是 编写 网 站 的 基础 。 
在 下 一 章 我 们 将 会 讲解 HTML 中 的 文本 样式 标签 。 
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2.9 本 章 习 题 


【习题 2-1】 下 面 给 出 一 个 简单 网 页 的 代码 ,请 分 别 标 出 HTML 文件 的 头 部 元 素 、 标 题 
元 素 和 主体 元 素 ， 代 码 如 图 2.12 所 示 。 


《!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset// 
EN” “http://www.w3.org/TR/xhtml1l/DTD/xhtml1-— 

frameset. dtd”> 

<html xmlns="http://www.w3.org/1999/xhtml”> 

<head> 

<meta http-equiv=“ Content-Type”content= "text/html: 


charset=utf-8” /> 
“title> 习 题 2-1</title> 
《/head> 

<body> 

学 习 HTML 

《</body> 

/html> 


图 2.12 网 页 代码 示意 图 


【习题 2-2】 给 出 一 个 简单 网 页 ， 设 置 插入 水 平分 隔 线 ， 并 设置 它 的 粗细 为 8px、 长 度 
为 100px、 颜 色 为 黄色 ， 效 果 如 图 2.13 所 示 。 


j/ 开 级 /习题 /第 2 意 /2-2.htm 窑 | 入 
设置 水 平分 隔 线 粗细 为 8px, 长 度 为 100px, 颜色 为 黄色 | 


图 2.13 插入 水 平分 隔 线 效果 图 


【习题 2.3】 给 出 一 个 简单 网 页 ， 设 置 网 站 背景 颜色 为 蓝 色 ， 并 对 网 页 中 的 内 容 进行 换 
行 ， 效 果 如 图 2.14 所 示 。 


全 CG Ofle/F/b/H 窗 | A 
从 这 里 开始 
换 一 行 显示 


| 换 两 行 显示 


图 2.14 设置 背景 颜色 并 对 内 容 进行 换行 效果 图 
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一 个 网 站 是 由 文字 、 图 片 、 视 频 、 音 频 等 元 素 组 成 的 ， 而 且 文字 是 网 站 构成 和 表现 网 
站 的 重要 元 素 。 通 过 浏览 文字 可 以 看 到 网 站 所 要 传达 的 信息 。 一 个 好 的 网 站 ， 文 字样 式 的 
设置 是 非常 重要 的 ， 它 直接 影响 网 站 的 整体 效果 。 在 制作 网 站 时 ， 网 站 设计 师 都 会 使 用 设 
置 好 的 文本 来 修饰 网 站 。 本 章 将 会 讲解 如 何 用 文本 标签 来 设置 文本 样式 。 


3.1 设置 标题 字体 


标题 是 一 段 内 容 的 简介 。 通 过 标题 ， 我 们 就 可 以 了 解 文章 内 容 所 要 表达 的 重点 ， 所 以 
标题 是 网 站 中 的 必要 部 分 。 有 了 标题 后 ， 为 了 可 以 吸引 到 更 多 的 浏览 者 阅读 网 站 内 容 ， 就 
得 对 标题 字体 做 出 修饰 ， 使 标题 更 明显 和 漂亮 ， 更 容易 被 浏览 者 注意 到 。 

标题 的 字体 标签 以 几 种 固定 的 字号 来 显示 标题 。 它 的 设置 是 通过 <h> 来 实现 的 ， 将 要 
显示 的 标题 文字 包含 在 <h> 和 </h> 里 面 即 可 。 其 语法 结构 如 下 所 示 ; 

<h#> 标 题 文字 </h#> <!- -标题 标签 --> 


其 中 ，<h> 为 起 始 标签 ，</h> 为 结束 标签 。 其 中 ，# 可 以 为 1、2、3、4、5、6， 这 是 标 
题 的 有 效 值 范 围 ， 它 只 有 <h1><h2><h3><h4><h5><h6> 这 六 种 样式 。 如 果 想 每 个 标题 都 达 
到 同样 的 效果 ， 只 需要 重复 地 使 用 标题 的 样式 。 

【示例 3.1】 下 面 是 <h> 标 签 的 一 个 具体 实例 ， 代 码 如 下 : 

<h1> 正 在 使 用 标题 标签 </h1> <!-- 添 加 标题 --> 


效果 如 图 3.1 所 示 。 
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正在 使 用 标题 标签 


图 3.1 标题 标签 <h1> 效 果 图 


使 用 <h1><h2><h3><h4><h5><h6> 可 以 用 来 区 分 标题 的 大 小 。 通 常情 况 下 ， 默 认 第 一 
个 标题 为 <h1>， 其 字体 是 最 大 的 ， 当 后 面 多 增加 一 个 标题 ， 后 面 的 标题 字体 就 会 变 小 ， 依 
此 类 推 。 
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【示例 3.2】 下 面 是 多 个 标题 的 书写 格式 和 效果 体现 。 代 码 如 下 : 


<h1> 这 里 是 hl 标题 </h1> <! 一 -添加 标题 1--> 
<h2> 这 里 是 h2 标题 </h2> <!-- 添 加 标题 2--> 
<h3> 这 里 是 h3 标题 </h3> <!-- 添 加 标题 3--> 
<h4> 这 里 是 h4 标题 </h4> <!-- 添 加 标题 4--> 
<h5> 这 里 是 h5 标题 </h5> <!-- 添 加 标题 5--> 
<h6> 这 里 是 h6 标题 </h6> <!-- 添 加 标题 6--> 
效果 如 图 3.2 所 示 。 


全 Cf Ofile///c/Users/yrt 安 入 


这 里 是 hl 标题 
这 里 是 h2 标 题 
这 里 是 h3 标 题 
这 里 是 h4 标 题 


这 里 是 h5 标 题 


这 里 是 hf 标题 


图 3.2 使 用 多 个 标题 标签 效果 图 


3.2 设置 网 页 文字 样式 


标题 字体 定义 之 后 ， 就 要 开始 定义 网 页 中 文字 的 样式 ，<font> 标 签 是 专门 定义 网 页 文 
字 的 标签 。 它 可 以 定义 文字 的 字体 、 字 号 、 颜 色 等 属性 。 在 这 一 节 将 详细 讲解 <fon 作 标签 
里 的 字体 大 小 <size> 属 性 和 字体 风格 <face> 属 性 。 


3.2.1 设置 文本 大 小 


设置 字体 大 小 可 以 使 用 <font> 标 签 里 的 <size> 属 性 ，<size> 属 性 用 来 设 定 文本 字号 ， 取 
值 范围 是 1 一 7。 其 语法 结构 如 下 所 示 ; 
<font size=""> 文 本 内 容 </font> ”<!-- 设 置 字体 大 小 --> 
其 中 ，<font> 是 起 始 标签 ，</font> 为 结束 标签 。 在 font 后 加 一 个 空格 再 写 上 <size> 标 
。 其 中 ，size 默认 值 为 3。size=7 是 最 大 的 字体 ， 数 字 越 小 字体 也 就 会 越 小 。 
【示例 3.3】 下 面 是 不 同 size 属性 值 的 使 用 比较 ， 代 码 如 下 : 


<font size=1> 设 置 字体 大 小 为 1</font><br /><br /> <!-- 设 置 字体 大 小 为 1--> 
<font size=2> 设 置 字体 大 小 为 2</font><br /><br /> <1!-- 设 置 字体 大 小 为 2--> 
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<font size=3> 设 置 字体 大 小 为 3</font><br /><br /> <!-- 设 置 字体 大 小 为 3--> 
<font size=4> 设 置 字体 大 小 为 4</font><br /><br /> <1!-- 设 置 字体 大 小 为 4--> 
<font size=5> 设 置 字体 大 小 为 5</font><br /><br /> <!- -设置 字 体 大 小 为 5--> 
<font size=6> 设 置 字体 大 小 为 6</font><br /><br /> <!-- 设 置 字体 大 小 为 6--> 
<font size=7> 设 置 字体 大 小 为 7</font> <!-- 设 置 字体 大 小 为 7--> 


效果 如 图 3.3 所 示 。 
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设置 字体 大 小 为 1 

设置 字体 大 小 为 2 
设置 字体 大 小 为 3 
设置 字体 大 小 为 4 


设置 字体 大 小 为 5 
设置 字体 大 小 为 6 


设置 字体 大 小 为 7 


图 3.3 使 用 不 同 size 属性 值 的 效果 图 


3.2.2 设置 文本 字体 


<font> 标 签 中 的 <face> 属 性 是 用 来 设 定 文本 所 使 用 的 字体 , 它 和 <size> 标 签 一 样 都 是 写 
在 <font> 里 面 的 。 通 过 设置 不 同 的 字体 ， 可 以 使 网 站 更 加 漂亮 ， 更 加 的 吸引 浏览 者 。 其 语 
法 形式 如 下 所 示 : 

<font face=""> 文 本 内 容 </font> <!-- 设 置 字体 风格 --> 


<face> 标 签 写 法 和 <size> 标 签 一 样 , 这 里 就 不 再 多 讲 。“* 里 所 填写 的 风格 也 可 以 是 多 个 ， 
中 间 用 英文 逗号 隔 开 。 使 用 多 个 风格 是 为 了 让 浏览 器 在 读 取 网 站 字体 风格 时 找 不 到 第 一 种 
风格 ， 可 以 再 选择 第 二 种 风格 ， 依 此 类 推 。 通 常情 况 下 ， 设 计 师 不 会 在 <face> 里 面 写 太 多 
的 风格 ， 一 般 都 是 三 到 四 个 风格 。 

【示例 3.4】 下 面 是 具有 多 个 风格 的 字体 效果 ， 代 码 如 下 : 

<font face=" 黑 体 "> 设置 文本 字体 为 黑体 </font><br/><br/><!-- 设 置 字体 风格 为 "黑体 "--> 


<font face=" 宋 体 "> 设置 文本 字体 为 宋体 </font> <!-- 设 置 字体 风格 为 "宋体 "--> 
效果 如 图 3.4 所 示 。 
全 注意 : 一 般 常 用 的 中 文字 体 风格 有 宋体 、 黑 体 , 常用 的 英文 字体 风格 有 Arial、Times New 
Roman. 
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eC a 
设置 文本 字体 为 黑体 


设置 文本 字体 为 宋体 


图 3.4 使 用 多 个 face 风格 的 效果 图 


3.3 文本 布局 标签 


TI 


一 个 网 页 中 的 文本 不 仅 要 设置 好 它 的 样式 ， 还 要 对 文本 进行 布局 。 通 过 对 文本 的 布 
来 达到 网 站 内 容 清晰 整洁 的 效果 。 做 好 文本 布局 ， 可 以 让 浏览 者 更 好 地 接受 网 站 的 内 容 。 
这 一 节 将 学 习 常用 的 文本 布局 标签 。 


3.3.1 缩 进 标签 <blockquote> 


<blockquote> 是 段落 缩 进 标签 ， 用 来 对 文本 内 容 进 行 缩 进 。<blockquote> 标 签 是 对 一 整 
段 内 容 的 缩 进 , 而 不 是 首 行 的 缩 进 , 它 会 在 整 段 的 左右 两 边 都 进行 缩 进 。 一 般 <blockquote> 
标签 的 缩 进 是 用 来 表示 引用 的 内 容 。 其 语法 结构 如 下 所 示 : 

<blockquote> 一 段 文本 内 容 </blockquote> <!-- 设 置 文本 内 容 的 缩 进 --> 


其 中 <blockquote> 为 起 始 标签 ，</blockquote> 为 结束 标签 。<blockquote> 标 签 是 写 在 
<body> 里 面 的 ,把 引用 的 文本 内 容 放 在 <blockquote> 标 签 里 , 便 可 以 直接 使 用 。<blockquote> 
标签 有 自动 换行 功能 ， 它 会 把 引用 的 文本 内 容 作 为 一 个 独立 段落 来 处 理 ， 所 以 前 后 不 需要 
再 写 段落 的 标签 。 

【示例 3.S】 下 面 是 <blockquote> 标 签 的 使 用 效果 ， 其 中 只 有 第 二 段 使 用 了 缩 进 元 素 ， 
代码 如 下 : 


HTML 英文 全 称 为 Hyper Text Markup Language， 中 文 名 称 为 超 文本 标记 语言 。HTML 是 一 种 
标记 语言 ， 也 就 是 由 标记 标签 组 成 的 语言 ， 是 目前 网 络 上 应 用 得 最 广泛 的 语言 ， 也 是 构成 网 站 页 面 
的 主要 基本 语言 。 

<blockquote> <!-- 设 置 文本 内 容 的 缩 进 ， 开 始 --> 

HTML 英文 全 称 为 Hyper Text Markup Language， 中 文 名 称 为 超 文本 标记 语言 。HTML 是 一 种 
标记 语言 ， 也 就 是 由 标记 标签 组 成 的 语言 ， 是 目前 网 络 上 应 用 得 最 广泛 的 语言 ， 也 是 构成 网 站 页 面 
的 主要 基本 语言 。 

</blockquote> <!-- 设 置 文本 内 容 的 缩 进 ， 结 束 --> 

HTML 英文 全 称 为 Hyper Text Markup Language， 中 文 名 称 为 超 文本 标记 语言 。HTML 是 一 种 
标记 语言 ， 也 就 是 由 标记 标签 组 成 的 语言 ， 是 目前 网 络 上 应 用 得 最 广泛 的 语言 ， 也 是 构成 网 站 页 面 
的 主要 基本 语言 。 


效果 如 图 3.5 所 示 。 
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和 了 >G 肖 © lec Users/yzo2/Desktop/Untitlied-L.html 安装 


HTML 英 文 全 称 为 Hyper Text Markup Language， 中 文 名 称 为 超 文 

本 标记 语言 。HTML 是 一 种 标记 语言 ， 也 就 是 由 标记 标签 组 成 的 语 

人 用 本 是 二 仙 肌 4 也 是 构成 网 站 页 面 的 主 
语言 。 


HTML 英 文 全 称 为 Hyper Text Markup Language， 中 文 


名 称 为 超 文本 标记 语言 。HTML 是 一 种 标记 语言 ， 也 就 
是 由 标记 标签 组 成 的 语言 ， 是 目前 网 络 上 应 用 得 最 广 
泛 的 语言 ， 也 是 构成 网 站 页 面 的 主要 基本 语言 。 


HTML 英 文 全 称 为 Hyper Text Markup Language， 中 文 名 称 为 超 文 
本 标记 语言 。HTML 是 一 种 标记 语言 ， 也 就 是 由 标记 标签 组 成 的 语 
和 也 是 构成 网 站 页 面 的 主 


图 3.5 使 用 <blockquote> 标 签 效果 图 


3.3.2 保留 格式 标签 <pre> 


<pre> 标 签 可 定义 预 格式 化 的 文本 , 用 来 保留 文本 中 的 空格 和 换行 。 就 算 在 代码 中 不 使 
用 空格 和 换行 的 标签 ， 而 是 手动 对 它 进 行 空格 和 换行 ， 浏 览 器 显示 出 来 的 效果 也 和 代码 中 
的 效果 相同 。 其 语法 如 下 所 示 : 

<pre> 文 本 内 容 </pre> <!-- 设 置 保留 代码 里 产生 的 空格 和 换行 -=-> 

<pre> 标 签 的 用 法 和 <blockquote> 标 签 的 用 法 是 一 样 的 ， 这 里 就 不 再 多 讲 。 

【示例 3.6】 下 面 是 使 用 <pre> 标 签 的 效果 ， 代 码 如 下 : 

<pre> <!-- 设 置 保留 代码 里 产生 的 换行 ， 开 始 --> 


这 是 保留 原始 格式 的 文本 ， 现 在 开始 手动 换行 和 空 格 ， 而 不 使 用 换行 和 空格 标签 。 


这 是 文本 行 的 效果 。 
</pre> <!-- 设 置 保留 代码 里 产生 的 换行 ， 结 束 > 


效果 如 图 3.6 所 示 。 


这 是 保留 原始 格式 的 文本 ， 现 在 开始 手动 换行 和 空 格 ， 而 不 使 用 换行 和 空格 标签 。 


图 3.6 ”<pre> 标 签 换行 和 空格 效果 图 


。27 。 


第 1 篇 HTML 网 站 开发 


3.3.3 ”使 用 内 联 行 <span> 


内 联 行 <span> 是 在 不 改变 原来 格式 的 情况 下 ， 对 放 在 内 容 里 的 某 些 字 进行 修饰 ， 或 对 
内 容 中 某 些 段 落 的 修饰 。 其 语法 结构 如 下 所 示 : 

<span> 内 容 </span> <! 一 使 用 内 联 标签 --> 

其 中 ，<span> 是 起 始 标签 ，</span> 为 结束 标签 。 值 得 注意 的 是 ，<span> 标 签 本 身 是 没 
有 意义 的 ， 只 有 结合 CSS 样式 才 可 以 看 出 特有 的 效果 。 由 于 <span> 标 签 是 内 联 标签 ， 所 以 
在 样式 使 用 方面 ， 它 会 比 其 他 的 样式 具有 更 多 的 优先 权 。 

【示例 3.7】 下 面 是 <span> 标 签 的 使 用 效果 ， 为 了 让 <span> 标 签 显示 出 效果 ， 这 里 将 使 
用 title 样式 ， 即 鼠标 放 在 文字 上 面 可 以 显示 下 面 的 注释 ， 代 码 如 下 : 

<span title=" 正 在 使 用 标题 "> 标题 </span> <! 一 使 用 内 联 标签 显示 title 样式 --> 


效果 如 图 3.7 所 示 。 


图 3.7 使 用 <span> 标 签 效果 图 
外 说 明 : <span> 标 签 的 使 用 相当 的 广泛 ， 而 它 的 使 用 要 结合 CSS 一 起 才 可 以 发 挥 作用 。 对 
于 <span> 标 签 的 详细 使 用 ， 可 以 参考 一 下 CSS 方面 的 书籍 。 


3.4 基于 物理 样式 的 文本 标签 


物理 样式 ， 是 指标 签 本 身 就 说 明了 所 修饰 文字 效果 的 样式 。 使 用 物理 样式 的 好 处 是 ， 
浏览 器 会 严格 遵照 标签 的 样式 显示 文本 。 因 此 在 不 希望 浏览 器 改变 样式 的 情况 下 ， 可 以 使 
用 物理 样式 来 设置 文本 内 容 。 


3.4.1 加 粗 标签 <b> 
加 粗 标签 <b> 就 是 把 正常 显示 的 字体 表现 为 比较 粗 、 比 较 明显 的 字体 。 通 常 需要 强调 


的 文字 ， 会 使 用 粗 体 来 表现 。 其 语法 结构 如 下 所 示 : 
<b> 加 粗 文字 </b> <!-- 设 置 粗 体 字 --> 
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其 中 ，<b> 是 开始 标签 ，</b> 为 结束 标签 。 加 粗 <b> 标 签 可 以 出 现在 内 容 的 任何 地 方 ， 
只 要 有 需要 强调 的 文字 ， 都 可 以 在 前 后 加 上 加 粗 <b> 的 标签 ， 而 不 会 自行 换行 或 出 现 其 他 
与 原来 字体 样式 不 同 的 效果 。 这 使 得 加 粗 <b> 标 签 变 得 很 方便 实用 。 

【示例 3.8】 下 面 是 加 粗 <b> 标 签 在 内 容 字体 上 的 使 用 效果 ， 代 码 如 下 : 

<b> 这 是 使 用 了 粗 体 的 文字 </b><br/> <!-- 设 置 粗 体 字 --> 

这 是 没有 使 用 粗 体 的 文字 


效果 如 图 3.8 所 示 。 


全 人 CA 和 file///C/Use 窜 
这 是 使 用 了 粗 体 的 文字 


这 是 没有 使 用 粗 体 的 文字 


图 3.8 ”使 用 加 粗 <b> 标 签 的 效果 图 


3.4.2 ”斜体 标签 <i> 

斜体 就 是 把 正常 显示 的 字体 表现 为 偏 斜 的 字体 。 通 常 需要 强调 的 文字 ， 也 会 以 斜体 来 
表现 ， 来 达到 想 要 的 强调 的 效果 。 其 语法 结构 如 下 所 示 : 

<i> 和 斜体 文字 </i> <!-- 设 置 斜体 字 --> 

斜体 <i> 标 签 和 粗 体 <b> 标 签 的 使 用 方法 一 样 ， 这 里 就 不 再 多 做 讲解 。 

【示例 3.9】 下 面 是 斜体 <i> 标 签 在 内 容 字 体 上 的 使 用 效果 ， 代 码 如 下 : 


<i> 这 是 斜体 字体 </i><br/><br/> <!-- 设 置 斜 体 字 --> 
这 是 正常 字体 


效果 如 图 3.9 所 示 。 


| © xa 
从 CG @file///CUse 安 A 


巡 定 行人 碑 字 从 


这 是 正常 字体 


图 3.9 ”使 用 斜体 <i> 标 签 的 效果 图 
为 了 使 强调 的 文字 更 加 的 生动 和 明显 ， 这 里 将 把 斜体 < 这 标签 嵌 套 到 粗 体 <b> 标 签 里 


面 ， 让 两 种 效果 同时 使 用 。 
【示例 3.10】 下 面 是 同时 使 用 粗 体 <b> 标 签 和 和 斜体 <i> 标 签 的 效果 ， 代 码 如 下 : 


。29 。 


第 1 篇 HIML 网 站 开发 


<b><i> 这 是 粗 体 和 斜体 字体 </i></b><br/> <!-- 设 置 粗 体 和 斜体 字 --> 
这 是 正常 字体 


效果 如 图 3.10 所 示 。 


CRIOfle A 
避 寿 沽 伯 彻 合作 字 侨 


这 是 正常 字体 


图 3.10 ”使 用 粗 体 <b> 和 和 斜体 <i> 标 签 的 效果 图 


外 技巧 : 由 于 针 体 <i> 效 果 没有 那么 明显 ， 很 多 时 候 粗 体 <b> 和 针 体 <i> 都 会 一 起 使 用 。 


3.4.3 ”下划线 标签 <u>/<ins> 

下 划 线 <u> 标 签 就 是 在 文字 下 增加 一 条 细 线 ， 对 文字 进行 标记 ， 以 区 别 于 其 他 的 文字 。 
其 语法 结构 如 下 所 示 : 

<u> 需 要 标注 下 划 线 的 文字 </u> <!-- 设 置 字体 下 划 线 --> 


下 划 线 <u> 标 签 和 之 前 说 的 两 种 标签 的 使 用 方法 一 样 ， 这 里 不 再 阐述 。 
【示例 3.11】 下 面 是 使 用 下 划 线 <u> 标 签 的 效果 ， 代 码 如 下 : 


<u> 这 是 带 下 划 线 的 字体 </u><br/> <!-- 设 置 字体 下 划 线 --> 
这 是 正常 字体 


效果 如 图 3.11 所 示 。 


< CS 台 @fie// 客 六 
这 是 带 下 划 线 的 字体 


这 是 正常 字体 


图 3.11 使 用 下 划 线 <u> 标 签 的 效果 图 


<ins> 标 签 是 对 文字 进行 标记 ， 让 其 显示 出 下 划 线 的 效果 。 对 比 于 <u> 标 签 ， 定义 不 同 ， 
而 显示 的 效果 是 相同 的 。 设 计 师 在 标注 一 篇 文章 的 时 候 ， 通 常 需要 对 文章 进行 修改 ， 修 改 
文章 的 最 基本 操作 就 是 插入 和 删除 文字 。 而 在 大 多 数 情 况 下 ， 这 些 修改 操作 的 过 程 都 需要 
显示 出 来 。 这 时 就 要 用 到 <ins> 标 签 ， 利 用 它 来 告诉 别人 ， 什 么 地 方 进行 了 修改 。 语 法 形式 
如 下 所 示 : 
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<ins> 需 要 标注 下 划 线 的 文字 </ins> <!-- 使 用 ins 设置 字体 下 划 线 --> 


这 里 <ins> 标 签 和 <u> 标 签 的 使 用 方法 是 一 样 的 。 
【示例 3.12】 下 面 是 使 用 下 划 线 <ins> 标 签 的 效果 ， 代 码 如 下 : 


<ins> 这 是 下 划 线 ins 字体 </ins><br/><br/> <!-- 使 用 ins 设置 字体 下 划 线 --> 
这 是 正常 字体 


效果 如 图 3.12 所 示 。 


A 六 C 本 filey//cyUser 窑 | 以 
这 是 下 划 线 ins 字 全 


这 是 正常 字体 


图 3.12 ”使 用 下 划 线 <ins> 标 签 的 效果 图 


和 <u> 标 签 不 同 的 是 ，<ins> 标 签 多 出 了 两 个 属性 值 : cit 和 datetime。 这 两 个 属性 值 只 
是 为 了 让 设计 师 在 代码 里 可 以 很 容易 看 到 其 修改 的 详细 信息 ， 在 效果 上 体现 不 出 这 两 个 属 
性 值 的 效果 。cit 属性 指出 原文 档 或 者 信息 的 链接 ， 该 属性 通常 用 来 指出 这 篇 文章 在 此 处 被 
改动 的 原因 。datetime 属性 指出 做 修改 的 时 间 。 

【示例 3.13】 下 面 是 使 用 下 划 线 <ins> 标 签 两 个 属性 的 效果 ， 代 码 如 下 : 

您 所 看 到 的 是 <ins cite="www.souhu.com"” datetime=="2012-7-17"> 已 经 修改 过 的 

</ins> 文 本 <!-- 使 用 ins 设置 字体 下 划 线 --> 


效果 如 图 3.13 所 示 。 
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您 所 看 到 的 是 已 经 修改 过 的 文本 


图 3.13 ”使 用 下 划 线 <ins> 标 签 丙 个 属性 的 效果 图 


3.4.4 删除 线 标签 <del>/<s> 


<del> 是 删除 线 标签 ， 它 会 在 文字 中 间 增 加 一 条 细 线 ， 对 文字 进行 标记 ,区别 于 其 他 的 
文字 。 通 常用 于 对 需要 删除 的 文字 做 标记 。 其 语法 结构 如 下 所 示 : 

<de1> 需 要 删除 的 文本 内 容 </de1> <!-- 使 用 del 设置 字体 删除 线 --> 

其 中 ，<del> 为 起 始 标签 ，</del> 为 结束 标签 。 用 法 和 下 划 线 <u> 标 签 用 法 相同 。 

【示例 3.14】 下 面 是 使 用 删除 线 <del> 标 签 的 效果 ， 代 码 如 下 : 


本 3 了 
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<de1> 这 是 设置 的 标注 删除 线 的 字体 </del> <br/><br/> ”<!-- 使 用 ael 设置 字体 删除 线 --> 
这 是 正常 字体 


效果 如 图 3.14 所 示 。 
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这 是 设置 的 标注 删除 线 的 字体 
这 是 正常 字体 


图 3.14 使 用 删除 线 <del> 标 签 的 效果 图 


<s> 标 签 也 是 删除 线 标记 ， 与 <del> 标 签 在 定义 上 有 所 不 同 , 不 过 显示 的 效果 是 一 样 的 。 
浏览 器 把 <del> 标 签 的 删除 标记 默认 成 为 文字 加 上 删除 线 ， 而 <s> 标 签 则 是 明确 规定 了 是 对 
文字 加 上 删除 线 ， 浏 览 器 不 用 去 理会 有 没有 删除 的 意义 。 语 法 形式 如 下 所 示 : 

<s> 文 字 </s> <!-- 使 用 s 设置 字体 删除 线 --> 

这 里 <s> 标 签 和 <del> 标 签 的 使 用 方法 是 一 样 的 。 

【示例 3.1S】 下 面 是 使 用 删除 线 <s> 标 签 的 效果 ， 代 码 如 下 


<s> 这 是 删除 线 s 的 字体 </s> <br/><br/> <!-- 使 用 s 设置 字体 删除 线 --> 
这 是 正常 字体 


效果 如 图 3.15 所 示 。 
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这 是 删除 线 s 的 字体 
这 是 正常 字体 


图 3.15 ”使 用 删除 线 <s> 标 签 的 效果 图 


名 说明: 常用 的 下 划 线 标签 为 <u> 标 签 ， 常 用 的 删除 线 标签 为 <del> 标 签 。 


3.4.5 ”等 宽 字 体 效果 <tt> 


在 <t 忆 标签 里 ， 文 字 间 是 以 等 宽 字 体 来 显示 的 。 其 语法 结构 如 下 所 示 : 
<tt> 等 宽 显示 的 文字 </tt> <! 一 -设置 等 宽 显示 效果 -> 


其 中 ，<tt> 为 起 始 标签 ，<jptt> 为 结束 标签 。<tt> 标 签 的 用 法 和 下 划 线 <u> 标 签 用 法 相同 ， 
这 里 不 再 详 述 。 
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【示例 3.16】 下 面 是 使 用 等 宽 字 体 效 果 <te> 标 签 的 效果 ， 代 码 如 下 : 


<tt> 这 是 等 宽 显示 字体 的 效果 </tt><br/> <!-- 设 置 打 印 机 效果 --> 
这 是 正常 字体 


效果 如 图 3.16 所 示 。 
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这 是 等 宽 显示 字 休 的 效果 
这 是 正常 字体 


图 3.16 使 用 等 宽 显示 字体 <tt> 标 签 的 效果 图 


3.4.6 设置 上 标 <sup> 


有 了 时候 在 数学 表达 式 中 ， 经 常会 出 现 上 标 文 字 ， 即 一 段 文字 以 小 字体 的 方式 显示 在 另 
- 段 文字 的 右上 角 。 在 Dreamweaver 中 并 不 能 直接 写 出 上 标的 格式 ， 如 果 想 写 上 标 ， 可 以 
使 用 <sup> 标 签 。 其 语法 结构 如 下 所 示 : 
<sup> 表 示 为 上 标的 文字 </ sup> <!-- 设 置 文字 上 标 效果 --> 
其 中 ，<sup> 为 开始 标签 ，</sup> 为 结束 标签 。 
【示例 3.17】 下 面 是 使 用 上 标 <sup> 标 签 的 效果 ， 代 码 如 下 : 


这 是 上 标 标签 <sup>sup</sup> 的 用 法 <br/><br/> <!-- 设 置 文字 上 标 效果 --> 
13<sup>2</sup> 


效果 如 图 3.17 所 示 。 
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这 是 上 标 标签 swp 的 用 法 


图 3.17 使 用 上 标 <sup> 标 签 的 效果 图 


3.4.7 设置 下 标 <sub> 


下 标 是 一 段 文字 以 小 字体 的 方式 显示 在 另 一 段 文字 的 右 下 角 。 下 标 <sub> 标 签 和 上 标 
<sup> 标 签 的 写法 是 一 样 的 ， 用 法 也 是 一 样 的 。 其 语法 结构 如 下 所 示 : 

<sub> 表 示 为 下 标的 文字 </ sub> <!-- 设 置 文字 下 标 效 果 --> 

其 中 ，<sub> 为 开始 标签 ，</sub> 为 结束 标签 。 

【示例 3.18】 下 面 是 使 用 下 标 <sub> 标 签 的 效果 ， 代 码 如 下 : 
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<sub> 这 是 下 标 标签 sub 的 用 法 </sub> <br/><br/> <!-- 设 置 字体 下 标 效 果 --> 
13<sub>2</sub> 


效果 如 图 3.18 所 示 。 


Ouras > 全 
SC ofl A 


这 是 下 标 标签 sub 的 用 法 


132 


图 3.18 ”使 用 下 标 <sub> 标 签 的 效果 图 


3.5 ”基于 逻辑 样式 的 文本 标签 


和 物理 样式 不 同 ， 届 和 辑 样 式 是 指 要 浏览 器 自己 理解 标签 的 意思 ， 然 后 再 显示 出 标签 的 
效果 。 因 此 在 不 同 的 浏览 器 下 ， 标 签 显示 的 效果 也 是 不 同 的 。 不 过 它 可 以 让 浏览 器 自己 选 
择 一 种 最 佳 的 显示 效果 。 下 面 我 们 来 详细 讲解 这 些 标签 。 


3.5.1 引用 标签 <samp> 


引用 标签 <samp> 是 指引 用 同样 的 宽度 来 显示 字体 ， 和 <t 忆 标签 的 使 用 效果 相似 。 区 别 
于 <t 忆 标签 , <samp> 标 签 是 用 来 定义 样本 的 文本 的 , 它 会 遵循 输入 的 文本 格式 来 显示 文本 。 
语法 形式 如 下 所 示 : 

<samp> 文 本 内 容 </samp> <!-- 设 置 引用 标签 --> 

其 中 ，<samp> 为 起 始 标签 ，</samp> 为 结束 标签 。 

【示例 3.19】 下 面 是 使 用 <samp> 标 签 的 效果 。 由 于 此 标签 在 不 同 浏览 器 里 显示 的 效果 
不 同 ， 下 面 将 用 相同 的 代码 、 不 同 浏览 器 来 做 分 析 比 较 。 代 码 如 下 : 

<code> 这 是 引用 标签 的 显示 效果 </code><br/><br/> <!-- 设 置 引 用 标签 -=-> 

这 是 正常 字体 


效果 如 图 3.19、 图 3.20 所 示 。 
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这 是 引用 标签 的 显示 效果 
这 是 正常 字体 


这 是 引用 标签 的 显示 效果 
这 是 正常 字体 


这 | 
图 3.19 ”使 用 谷歌 浏览 器 引用 <samp> 标 签 的 效果 图 “图 3.20 使 用 正 浏 览 器 引用 <samp> 标 签 的 效果 图 
可 以 看 到 ， 在 下 里 <samp> 标 签 显 示 的 字体 是 比 平 时 的 字体 要 小 一 些 。 而 在 谷歌 浏览 
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器 里 , <samp> 标 签 显 示 的 字体 和 平时 的 字体 一 样 大 。 由 于 浏览 器 对 理解 <samp> 这 个 标签 的 
定义 不 同 ， 所 以 就 显示 出 不 同 的 效果 。 


3.5.2 ”变量 名 称 定义 标签 <var> 


<var> 标 签 表示 变量 的 名 称 ， 是 为 网 页 上 出 现 的 变量 名 称 制订 的 格式 。<var> 标 签 里 的 
内 容 通常 都 是 以 斜体 显示 的 。 其 语法 形式 如 下 所 示 : 


<var> 变 量 名 称 </var> <!-- 设 置 变量 字体 --> 


其 中 ，<var> 为 起 始 标签 ，</var> 为 结束 标签 。 

【示例 3.20】 下 面 是 使 用 <var> 标 签 的 效果 ， 代 码 如 下 ; 

<var> 这 是 变量 标签 的 显示 效果 </var><br/><br/> <!-- 设 置 变量 字体 --> 
这 是 正常 字体 


效果 如 图 3.21 所 示 。 
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这 是 正常 字体 


图 3.21 使 用 变量 <var> 标 签 的 效果 图 


变量 <var> 标 签 由 于 显示 的 效果 和 和 斜体 标签 显示 的 效果 是 一 样 的 , 所 以 在 一 般 情 况 下 都 
比较 少 用 到 此 标签 。 


3.5.3 ”文献 参考 标签 <cite> 


te ee poh gi 例如 书籍 或 者 杂志 的 标 
题 。 通 常 将 内 容 显 示 为 斜体 效果 。 其 语法 结构 如 下 所 示 : 


<cite> 文 献 参 考 名 称 </cite> <!-- 设 置 对 文献 参考 的 字体 效果 --> 
其 中 ，<cite> 为 起 始 标签 ，</cite> 为 结束 标签 。 
【示例 3.21】 下 面 是 使 用 <cite> 标 签 的 效果 ， 代 码 如 下 : 


<cite> 这 是 文献 参考 标签 的 显示 效果 </cite><br><br/> 
<!-- 设 置 对 引用 的 内 容 出 处 的 字体 效果 --> 


这 是 正常 字体 
效果 如 图 3.22 所 示 。 
全 说 明 : 上 面 介 绍 了 几 个 都 是 显示 出 儿 体 效果 的 标签 ， 虽 然 效果 相同 ， 但 是 它们 所 代表 的 
意义 是 不 同 的 。 
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加 乱 广 志 参 考 夺 僚 舱 缆 示 襄 揪 
这 是 正常 字体 


图 3.22 ”使 用 文献 参考 <cite> 标 签 的 效果 图 


3.5.4 设置 小 号 字体 <small> 


<small> 标 签 是 让 浏览 器 呈现 小 号 字体 效果 ， 包 含 在 <small> 标 签 内 的 内 容 将 会 根据 济 
览 器 的 设置 来 显示 小 号 的 字体 。 这 里 的 小 号 字体 相当 于 font 里 面 的 size 为 1 时 的 字体 。 其 
语法 结构 如 下 所 示 : 

<small> 文 本 文字 </small> <!-- 设 置 小 号 字体 --> 

其 中 ，<small> 为 起 始 标签 ，</small> 为 结束 标签 。 

【示例 3.22】 下 面 是 使 用 <small> 标 签 的 效果 ， 为 了 让 效果 更 佳 ， 这 里 加 入 了 size=1 的 
属性 ， 来 和 <small> 标 签 做 对 比 ， 代 码 如 下 : 

<small> 这 是 小 号 字体 的 显示 效果 </small> <br /><br /><!-- 使 用 small 设置 小 号 字体 --> 

<font size="-1"> 这 是 size=1 的 显示 效果 </font> <!-- 使 用 font 设置 小 号 字体 --> 


效果 如 图 3.23 所 示 ， 可 以 看 出 它们 的 效果 是 一 样 的 。 


字体 设置 
CN Ofile//c/Users 安 A 


这 是 小 号 字体 的 显示 效果 


这 是 size=1 的 显示 效果 


图 3.23 ”使 用 <small> 标 签 的 效果 图 


3.5.5 设置 大 号 字体 <big> 


<big> 标 签 和 <small> 标 签 的 用 法 一 样 ， 它 是 让 浏览 器 显示 比 页 面 中 其 他 字体 大 一 号 的 
字体 。<big> 标 签 还 可 以 同时 进行 多 个 嵌 套 ， 但 需要 注意 的 是 <big> 标 签 在 进行 多 个 嵌 套 的 
情况 下 ， 在 最 里 层 的 字体 会 自动 再 变 大 一 号 。 其 语法 结构 如 下 所 示 : 


<big> 文 本 文字 </big> <! 一 设置 大 一 号 字体 -> 


其 中 ，<big> 为 起 始 标 签 ，</big> 为 结束 标签 。 
【示例 3.23】 下 面 是 使 用 <big> 标 签 的 效果 ， 代 码 如 下 : 
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<big> 这 是 大 一 号 字体 的 显示 效果 </big><br/><br/> 大人 
这 是 正常 字体 


效果 如 图 3.24 所 示 。 
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这 是 大 一 号 字体 的 显示 效果 
这 是 正常 字体 


图 3.24 使 用 <big> 标 签 的 效果 图 


【示例 3.24】 下 面 是 使 用 <big> 标 签 进行 两 个 嵌 套 的 效果 ， 代 码 如 下 : 


<big> 您 现在 看 到 的 是 <big> 嵌 套 大 一 号 字 </big> 的 显示 效果 </big><br><br/> 
<!-- 设 置 柑 套 大 一 号 字体 --> 
这 是 正常 字体 


效果 如 图 3.25 所 示 ， 可 以 看 出 最 里 层 的 字体 要 比 外 层 的 还 要 大 一 号 。 
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您 现在 看 到 的 是 舱 套 大 一 号 字 的 显示 效果 
这 是 正常 字体 


图 3.25 ”使 用 <big> 标 签 进行 两 个 嵌 套 的 效果 图 


3.6 本 章 小 结 


本 章 对 网 页 中 设置 文本 样式 的 标签 进行 了 讲解 。 详 细 介 绍 了 如 何 设 置 标题 样式 、 网 页 
文字 样式 以 及 基于 物理 样式 和 风 辑 样式 的 文本 标签 。 文 本 标签 是 网 页 中 最 基本 、 也 是 最 重 
要 的 标签 。 因 此 读者 要 认真 学 习 本 章 内 容 ， 为 以 后 制作 完整 网 站 打 好 基础 。 在 下 一 章 ， 我 
们 将 会 讲解 超 链接 的 使 用 。 


3.7 本 章 习 题 


【习题 3-1) 将 网 页 中 的 文字 设置 为 宋体 ,并且 将 字体 大 小 设置 为 15px， 效果 如 图 3.26 
所 示 。 
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全 说 C 格 @file/W/FVbj/ 升 级 /习题 /第 2 齐 /2-4.html 家 | 入 


设置 文本 字体 为 宋 


体 ， 大 小 为 15px 


图 3.26 设置 文字 字体 和 大 小 效果 图 


【习题 3-2】 将 网 页 中 的 第 二 段 文字 进行 段落 缩 进 ， 并 将 第 一 段 中 的 文字 加 粗 和 设置 为 
斜体， 效果 如 图 3.27 所 示 。 


全 广 C 省 加 file///FVbj/ 升 级 /习题 /第 3 童 /3-2.html 司 | 


HTUL 严 交会 疡 为 Hyper Text Markup Language， 力 区 广 
各 闭 为 留 六 不 傣 问 各 入 ， 的 及 是 扩 产 问 东 佑 折 成 胞 洛 语 


HTML 英 文 全 称 为 Hyper Text Markup 
Language， 中 文 名 称 为 超 文本 标记 语言 。HTML 
是 一 种 标记 语言 ， 也 就 是 由 标记 标签 组 成 的 语 
言 ， 是 目前 网 络 上 应 用 得 最 广泛 的 语言 ， 也 是 
构成 网 站 页 面 的 主要 基本 语言 。 


图 3.27 设置 段落 缩 进 和 加 粗 加 、 设 置 为 斜体 效果 图 
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超 链接 是 HTML 文档 的 显著 特点 ， 是 区 别 于 其 他 文档 的 重要 标记 。 超 链接 是 指 一 个 网 
页 指向 一 个 目标 的 连接 关系 ， 这 个 目标 可 以 是 另 一 个 网 页 或 者 相同 网 页 上 的 不 同位 置 ， 也 
可 以 是 一 张 图 片 、 一 个 文件 等 。 它 是 一 个 网 站 的 精髓 ， 可 以 将 各 个 网 页 链接 起 来 ， 从 而 使 
网 站 更 加 丰富 多 彩 。 本 章 我 们 就 来 详细 讲解 超 链接 的 相关 知识 。 


4.1 创建 超 链接 


创建 超 链接 的 标签 是 <a>， 以 <a> 开 始 ， 以 </a> 结 束 。<a> 标 签 是 网 站 超 链接 的 核心 。 
文字 包含 在 <a> 标 签 内 , 会 作为 超 链接 标记 ,或 者 称 为 标记 点 。<a> 标 签 不 能 当空 标签 使 用 ， 
起 码 要 带 一 个 属性 值 。 一 般 情况 下 ，<a> 标 签 里 会 带 一 个 href 属性 〈 将 在 下 一 节 讲 解 ) 。 
其 语法 结构 如 下 所 示 : 

<a href=" 属 性 值 "> 超 链 接 名 称 </a> <! 一 创建 超 链接 --> 


<a> 标 签 ， 当 链接 目标 是 另 一 个 页 面 或 文件 时 ， 就 称 为 超 链接 。 当 链接 目标 是 同一 个 
页 面 或 文件 的 某 个 位 置 时 ,就 称 为 锚 记 点 。 使 用 超 链 接 可 以 丰富 很 多 的 网 页 内 容 , 把 网 页 、 
图 像 、 音 频 等 各 种 内 容 超 链接 到 一 起 ， 才 可 以 构成 丰富 多 彩 的 网 站 。 


4.2 href 属性 


<a> 标 签 里 的 href 属性 用 来 指定 超 链 接 目标 的 地 址 。 它 是 超 链接 里 非常 重要 的 一 个 属 
性 ， 也 是 最 基本 的 属性 。 下 面 我 们 来 介绍 href 属性 的 几 种 用 法 。 


4.2.1 连接 到 同一 页 面 其 他 位 置 


超 链接 不 仅 可 以 链接 其 他 网 页 、 文 件 等 ， 还 可 以 链接 到 同一 页 面 上 的 其 他 位 置 。 像 这 
种 在 同一 页 面 上 的 链接 ， 叫 做 锚 记 点 。<a> 标 签 里 的 name 属性 ， 通 过 和 href 属性 合作 ， 可 
以 使 链接 链 到 当前 页 面 的 指定 位 置 。 一 般 在 网 页 内 容 很 多 的 情况 下 ， 便 会 使 用 此 链接 ， 只 
需要 单 击 相关 的 链接 即 可 ， 而 无 须 不 停 地 滚动 页 面 来 查找 相关 的 内 容 。name 属性 和 href 
属性 一 样 ， 都 写 在 <a> 标 签 里 ， 中 间 用 一 个 英文 的 空格 隔 开 。 其 语法 结构 如 下 : 
和 <!-- 设 置 链接 读 取 名 字 --> 
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其 中 ,，n 是 填写 一 个 用 来 给 href 属性 链接 读 取 的 名 字 。 这 段 语 法 是 放 在 要 链接 到 的 内 
容 位 置 上 的 ， 值 得 注意 的 是 ，n 名 字 不 要 使 用 中 文 ， 使 用 中 文 会 很 有 可 能 使 页 面 出 现 乱码 
或 者 链接 不 到 ， 最 好 是 简短 易 懂 的 英文 。 

这 里 的 href 属性 是 用 来 链接 带 有 name 属性 的 内 容 的 。 值 得 注意 的 是 ， 用 于 锚 记 点 链 
接 的 href 属性 ， 在 链接 内 容 前 面 要 加 多 一 个 # 号 。 其 语法 结构 如 下 : 

<a href="#n">...</a> <! 一 -设置 链接 地 址 --> 


为 了 可 以 看 到 链接 效果 ， 这 里 将 用 两 幅 图 来 作为 示例 。 
【示例 4.1】 下 面 是 结合 name 属性 和 href 属性 的 使 用 ， 来 实现 锚 记 点 链接 的 效果 ， 新 
建 HIML 文档 4.1.html 来 创建 链接 ， 代 码 如 下 : 


<a href="#name1"> 单 击 链接 到 本 页 的 一 首 诗 《 满 江 红 》</a><br /> <!-- 设 置 链接 地 址 --> 
<br /><br /><br /><bBr /Sbr /><br /><br /><br /><br cpbr /> 

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 

<a name="name1"> 满 江 红 </a><br /><br /> <!-- 设 置 链接 读 取 名 字 --> 
怒 发 冲 冠 ， 和 凭栏 处 ， 潇 潇 雨 吹 。 <br /><br /> 

抬 望 眼 ， 仰 天 长 啸 ， 壮 怀 激烈 。<br /><br /> 

三 十 功名 尘 与 土 ， 八 千里 路 云 和 月 。<br /><br /> 

呐 等 闲 ， 白 了 少年 头 ， 空 翡 切 ! <br /><br /> 

靖康 耻 ， 犹 未 雪 ; 臣子 恨 ， 何 时 灭 ? <br /><br /> 

驾 长 车 ， 踏 破 贺 兰 山 俐 。<br /><br /> 

壮志 饥 餐 胡 虏 肉 ， 笑 谈 渴 饮 匈奴 血 。<br /><br /> 

待 从 头 ， 收 拾 旧 山 河 ， 朝 天 益 ! <br /> 


效果 如 图 4.1、 图 4.2 所 示 ， 当 单 击 链接 时 ， 就 会 跳 转 到 name 所 指定 的 位 置 。 


€  C A Ofle///C/Users/yzx2/Desktop/Untit 安 | 入 


€ CH ©file///c/Users/yztx2/Desktop/Untit 字 A 


满江红 
怒 发 冲 冠 ， 凭 栏 处 ， 潇 潇 雨 鞭 。 
抬 望 眼 ， 仰 天 长 啸 ， 壮 怀 激烈 。 


三 十 功名 尘 与 土 ， 八 千里 路 云 和 月 。 
莫 等 用， 白 了 少年 头 ， 空 翡 切 ! 
靖康 耻 ， 犹 未 雪 ; 臣子 恨 ， 何 时 灭 ? 
轰 长 车 ， 踏 破 贺兰山 众 。 

壮志 饥 餐 胡 虏 肉 ， 笑 谈 渴 饮 匈奴 血 。 
待 从 头 ， 收 拾 旧 山河 ， 朝 天 阙 ! 


图 4.1 链接 页 面 效果 图 图 4.2 单 击 链接 后 跳 转 到 的 页 面 效 果 图 


外 技巧 : 这 种 链接 方法 经 常 被 用 来 链接 页 面 内容 过 多 的 网 页 上 的 导航 。 
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4.2.2 ”本 地 相对 路 径 


相对 路 径 就 是 指 由 这 个 文件 所 在 的 路 径 引 起 的 跟 其 他 文件 〈 或 文件 夹 ) 的 路 径 关 系 。 
简单 地 说 就 是 当前 目录 与 上 下 级 目录 之 间 的 关系 。 分 为 同 级 目录 、 上 级 目录 和 下 级 目录 。 


1. 同 级 链接 


同 级 链接 就 是 在 同一 级 目录 里 ， 页 面 和 页 面 间 的 链接 可 以 直接 填写 页 面 的 名 称 。 就 是 
说 只 需要 输入 页 面 的 名 称 就 可 以 实现 链接 。 

【示例 4.2】 下 面 是 使 用 href 属性 实现 同 级 链接 的 具体 效果 ， 这 里 使 用 的 链接 都 是 用 示 
例 的 页 面 文件 名 称 作 为 链接 。 新 建 HTML 文档 4.2.html 来 创建 链接 到 同 级 目录 4.1.html， 
代码 如 下 : 


<a href="4.1.html"> 链 接 到 示例 4.1</a> <!-- 设 置 链接 地 址 --> 
效果 如 图 4.3、 图 4.4 所 示 ， 当 单 击 图 4.4 中 的 链接 时 ， 就 会 跳 转 到 4.1.html 的 运行 页 面 。 


图 4.3 两 个 页 面 在 同一 级 目录 下 图 4.4 使 用 href 属性 实现 同 级 链接 效果 图 


2. 下 级 链接 


下 级 链接 就 是 两 个 页 面 在 同一 个 文件 夹 下 ， 但 不 在 同一 级 目录 里 ， 而 是 被 链接 的 页 面 
在 用 来 链接 页 面 的 文件 夹 里 。 

【示例 4.3】 下 面 是 使 用 href 属性 实现 下 级 链接 的 效果 。 这 里 使 用 的 链接 都 是 用 示例 的 
页 面 文件 作为 链接 ， 为 了 达到 下 级 链接 的 效果 ， 在 图 4.3 的 文件 夹 下 新 建 了 一 个 文件 夹 ， 
命名 为 Wjml。 把 示例 4.1 放 在 xjml 文件 夹 里 ， 新 建 HTML 文档 4.4.html 来 创建 链接 ， 代 码 
如 下 : 

<a href="xjml/4.1.html"> 链 接 到 下 级 目录 里 的 示例 4.1</a> <!-- 设 置 链接 地 址 --> 


效果 如 图 4.5、 图 4.6 所 示 。 
可 以 看 到 ,链接 下 级 菜单 只 需要 把 目录 一 起 填写 在 href 属性 里 面 就 可 以 了 。 值 得 注意 
的 是 ， 文 件 名 和 文件 之 间 是 用 /来 区 分 开 的 。 无 论 是 多 少 个 目录 ， 都 可 以 是 这 样 链 接 的 。 
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HTML 文 梢 。 大 小 0 


| 加 Ye” a | 


图 4.5 两 个 页 面 不 在 同一 级 目录 下 图 4.6 使 用 href 属性 实现 下 级 链接 效果 图 


3. 上 级 链接 


上 级 链接 和 下 级 链接 刚好 相反 ， 是 指 互相 链接 的 两 个 页 面 在 同一 个 文件 夹 ， 但 是 不 在 
同一 级 目录 下 ， 用 来 链接 的 页 面 在 被 链接 页 面 的 文件 夹 里 。 

【示例 4.4】 下 面 是 使 用 href 属性 实现 上 级 链接 的 具体 效果 ， 这 里 使 用 的 链接 都 是 用 示 
例 的 页 面 文件 作为 链接 。 为 了 达到 上 级 链接 的 效果 ， 在 这 里 新 建 HTML 文档 4.5.html 创建 
链接 到 4.1.html， 把 4.5.html 放 在 新 建文 件 夹 sjml 里 面 。 把 4.1.html 和 sjml 文件 夹 放 在 同 
一 级 目录 下 ， 代 码 如 下 : 

<a href=". ./4.1.html"> 链 接 到 上 级 示例 4.1</a> <!-- 设 置 链接 地 址 --> 


效果 如 图 4.7、 图 4.8 所 示 。 


Cl OE a 
链接 到 上 级 示例 4.1 


1 地 ml 修改 日 阳 : 2012/11/1 1138 
B 文件 


图 4.7 两 个 页 面 不 在 同一 级 目录 下 4.8 使 用 href 属性 实现 上 级 链接 效果 图 


可 以 看 到 两 点 加 /能 跳 转 到 上 一 级 的 目录 菜单 ， 这 在 链接 上 起 到 很 大 的 帮助 。 不 过 在 链 
接 中 ， 不 要 使 用 太 多 的 跳 转 ， 这 样 会 引起 不 必要 的 混乱 。 


全 注意 : 在 网 站 里 ， 不 要 使 用 中 文 名 字 来 命名 文件 名 ， 应 该 全 部 都 使 用 英文 的 文件 名 。 因 
为 在 链接 里 ， 使 用 中 文 的 文件 名 ， 常 常会 使 链接 出 现 乱码 ， 导 致 出 错 。 
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4.2.3 空间 网 址 绝对 路 径 : URL 


URL 是 指 空间 地 址 ， 是 英文 Uniform Resource Locator 的 缩写 ， 意 思 是 “统一 资源 定 
位 符 ”， 就 是 把 别人 的 网 站 链接 到 自己 的 网 站 上 ， 也 就 是 链接 对 象 与 被 链接 对 象 不 在 同一 
个 网 站 上 。URL 指明 了 需要 访问 的 网 站 的 绝对 位 置 ， 这 个 绝对 位 置 就 是 绝对 路 径 。 此 链接 
通常 是 用 来 做 友情 链接 和 合作 伙伴 等 。URL 的 链接 地 址 一 般 都 是 放 在 href 属性 里 面 的 。 

【示例 4.5】 下 面 是 使 用 href 属性 实现 URL 链接 的 具体 效果 , 新 建 HTML 文档 4.6.html 
创建 链接 到 搜狐 网 站 。 代 码 如 下 : 

<a href="http://www.sohu.com/"> 链 接 到 搜狐 网 站 </a> <!-- 设 置 链接 地 址 --> 


效果 如 图 4.9 所 示 ， 单 击 链接 就 会 跳 转 到 搜狐 网 站 。 


二 > CC 帮 [OfileW/F 窜 以 
链接 到 搜狐 网 站 


图 4.9 使 用 href 属性 实现 URL 链接 效果 图 


这 里 引用 了 搜狐 的 网 址 来 做 示例 ， 可 以 看 到 ， 在 网 址 后 面 加 了 / 号 ， 虽 然 不 加 也 可 以 
链接 到 指定 网 址 , 但 是 为 了 规范 符合 web 标准 ， 必 须 习惯 使 用 网 址 后 面 加 了 / 号 。 值 得 注 
意 的 是 ，URL 链接 要 整个 网 址 都 放下 去 ， 不 能 少 了 像 http:/ 这 样 的 头 。 因 为 少 了 头 部 之 后 ， 
浏览 器 会 认为 是 在 同 个 目录 下 的 链接 ， 而 不 会 自动 认为 是 另外 的 一 个 网 址 ， 这 样 就 会 造成 
链接 错误 。 


4.3 target 属性 


<a> 标 签 中 的 target 属性 是 用 来 控制 链接 目标 的 打开 方式 。 它 一 共有 4 种 方式 ， 分 别 是 
_blank、_parent、_self、_top。 下 面 分 别 来 加 以 说 明 。 


4.3.1 在 新 窗口 打开 _blank 
_blank 属性 值 是 使 浏览 器 总 在 一 个 新 打开 的 窗口 中 载 入 目标 文档 。 这 样 在 打开 新 的 链 


接 的 同时 ， 之 前 打开 的 网 页 还 存在 。 通 常情 况 下 ， 网 站 会 在 做 友情 链接 、 合 作 伙伴 等 地 方 
使 用 _blank 属性 。 其 语法 结构 如 下 : 
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<a href="#" target=" blank">..</a> <!-- 设 置 链接 地 址 和 打开 链接 的 方式 --> 


其 中 ，# 里 填写 的 是 链接 的 地 址 ，target="_blank" 是 一 个 固定 的 格式 。 
【示例 4.6】 下 面 是 使 用 _blank 属性 值 的 具体 效果 ， 代 码 如 下 : 


<a href="http://www.sohu.com/”target=" blank"> 链 接 到 搜狐 </a> 
<!-- 设 置 链接 地 址 和 打开 链接 的 方式 --> 


效果 如 图 4.10 所 示 。 


可 于 本 TREE 
BE 局 ae 的 DR > 三 


© www.sohu.com 


我 的 搜狐 由 昵称 /邮箱 /手机 号 


搜狗 输入 渤 浏览 器 地 图 邮件 向 博 博客 白 社 会 BBS 校友 录 视频 播客 ; 
新 闻 图 片 评论 我 说 两 句 军事 公益 体育 NBA 中 超 S 财经 理财 股票 基金 T 数码 
天 气 男人 女人 美容 母 届 健康 绿色 吃喝 促销 旅游 高尔夫 文化 读书 


图 4.10 使 用 _blank 属性 值 效果 图 


4.3.2 在 父 窗口 中 打开 _parent 
_parent 属性 值 是 使 文档 载 入 父 窗口 或 者 包含 超 链接 引用 的 框架 的 框架 集 (框架 将 会 在 
第 8 章 中 讲解 》。 即 页 面 会 在 父 窗 口上 打开 ， 原 来 的 页 面 会 被 覆盖 。 其 语法 结构 如 下 : 
<a href="#" target=" parent">..</a> <!-- 设 置 链接 地 址 和 打开 链接 的 方式 --> 
【示例 4.7】 下 面 是 使 用 _parent 属性 值 打开 链接 的 效果 ， 代 码 如 下 : 


<a href="http://www.sohu.com/"” target=" parent"> 链 接 到 搜狐 </a> 
<!-- 设 置 链接 地 址 和 打开 链接 的 方式 --> 


打开 链接 前 的 效果 如 图 4.11 所 示 。 其 中 ， 链 接 的 地 址 会 在 本 页 中 打开 ， 履 盖 掉 本 来 的 
页 面 ， 而 不 会 在 另 一 页 面 打 开 ， 效 果 如 图 4.12 所 示 。 


外 说 明 : _parent 属性 值 的 用 法 在 网 页 中 较 少 被 使 用 到 。 
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本 有 e///FVbj/ 采 建文 件 夫 /gjmU4.5.himl 


图 4.11 使 用 _parent 属性 值 打开 链接 前 效果 图 


搜狗 输入 法 浏览 器 地 图 邮件 答 情 博客 白 社 会 BBS 校友 录 视频 所 寿 
新 闻 图 片 评论 我 说 两 名 军事 公益 体育 NBA 中 起 S 财经 理财 股票 基金 T 数码 
天 气 男人 女人 美容 号 映 ”健康 ， 绎 色 吃喝“ 促 钢 旅游 高 尔 天 ”文化 ， 读 和 


热 
销 
自 
于 
家 5 
装 
手 : 
房 ; 


SopQLi 搜 狗 | 网 页 ”以 治 猎 洁 人 


4.12 ”使 用 parent 属性 值 打开 链接 后 效果 图 


4.3.3 在 当前 窗口 中 打开 _self 

_self 属性 值 表 示 在 当前 页 面 打 开 链 接 网 页 。 在 没有 指定 打开 方式 的 情况 下 ， 它 是 默认 
值 。 其 语法 结构 如 下 : 

区 全 和 天 全 在 二 村/ <!-- 设 置 链接 地 址 和 打开 链接 的 方式 --> 
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【示例 4.8】 下 面 是 使 用 _self 属性 值 打开 链接 的 效果 ， 代 码 如 下 : 


<a href="http://www.baidu.com/"” target-=" self"> 链 接 到 百度 </a> 
<! 一 设置 链接 地 址 和 打开 链接 的 方式 -> 


效果 如 图 4.13、 图 4.14 所 示 。 


后 了 CO 省 file:///F:/bj/ 新 建文 件 夹 /xjml/4.5.html 
链接 到 百度 


| 图 Ee- 下 ,人 30 首 上 
CN Owww.baiducom 
搜索 设置 | 登录 注册 


$8 
Bai 人 百度 


网 页 贴吧 知道 音乐 图 片 视频 地 图 


图 4.14 使 用 _self 属性 值 打开 链接 后 效果 图 


第 4 章 ” 超 链 接 


下 是 一 样 的 ， 它 们 在 网 页 中 都 较 少 被 使 用 到 。 


4.3.4 在 整个 窗口 中 打开 _top 


由 图 4.14 可 以 看 出 ，_self 属性 值 的 效果 和 _parent 属性 值 的 效果 在 不 使 用 框架 的 情况 


_top 属性 值 是 指 打开 的 链接 会 出 现在 最 顶层 的 窗 体 〈 如 一 个 窗口 中 含 很 多 的 框架 、 杠 


架 集 ， 在 这 些 元 素 中 ，top 表示 包含 它们 的 母 窗 体 ， 即 最 开始 的 那个 ) ， 即 整个 窗 
开 。 其 语法 结构 如 下 : 


中 打 


<a href="#" target=" top">..</a> <!-- 设 置 链接 地 址 和 打开 链接 的 方式 --> 


由 于 在 不 使 用 框架 的 情况 下 ，_top 属性 值 的 效果 和 _self 属性 值 、 parent 属性 值 
一 样 ， 这 里 不 再 举例 说 明 。 


44 本 章 小 结 


的 效果 


本 章 主要 讲解 了 超 链 接 的 使 用 方法 。 详 细 讲解 了 超 链 接 中 两 个 重要 的 属性 : href 属性 
和 target 属性 。 超 链接 是 网 站 制作 中 的 一 个 重要 部 分 ， 读 者 需要 认真 学 习 。 下 一 章 我 们 将 


讲解 网 页 制作 中 图 像 的 使 用 方法 。 
4.5 本 章 习 题 


【习题 4-1 ] 为 网 页 添加 一 个 简单 的 “百度 ”文字 链接 ,链接 到 百度 网 站 ,效果 如 


图 4.15 


4 C OfleWF/bj/ 窑 | 入 
百度 


9@ 
Baid 人 百度 | 


新 闻 网 页 贴吧 知道 音乐 图 片 视频 


图 4.15 百度 链接 效果 图 


【习题 4-2】 在 网 页 中 创建 一 个 链接 ， 并 以 新 窗口 的 方式 打开 ， 效 果 如 图 4.10 所 示 。 
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图 像 是 网 站 制作 中 应 用 最 多 的 元 素 ， 它 可 以 让 网 页 变 得 丰富 多 彩 。 如 果 一 个 网 页 中 只 
有 一 大 堆 文 字 而 没有 图 像 ， 那 么 浏览 者 多 半 会 失去 阅读 的 兴趣 。 而 图 像 在 网 页 中 的 应 用 不 
仅仅 是 “插入 图 片 ” 那 么 简单 ， 除 了 美观 外 ， 还 有 很 多 相关 的 图 像 属 性 来 支持 页 面 中 图 像 
的 应 用 。 本 章 我 们 就 来 详细 讲解 图 像 在 网 站 中 的 应 用 。 


5.1 图 像 的 格式 


在 网 页 中 ， 图 片 一 般 包 括 gif、jpg、png、bmp 这 4 种 格式 ， 比 较 常 用 的 就 是 gf 格式 
和 jpg 格 式 。gif 格 式 是 一 种 压缩 位 图 格式 , 支持 透明 背景 图 像 ， 适 用 于 多 种 操作 系统 ,“ 体 
型 ”很 小 ， 而 且 它 可 以 制作 简单 的 动画 ; jpg 格式 图 片 的 好 处 在 于 ， 它 清晰 度 高 ， 而 且 可 
以 很 好 地 压缩 图 片 的 大 小 ， 改 善 加 载 速度 ; png 格式 的 图 片 是 透明 的 、 容 量 小 的 图 片 ，bmp 
格式 的 图 片 清 晰 度 不 高 ， 容 量 较 大 。 

由 于 网 站 需要 ， 想 使 用 透明 效果 的 和 想 网 站 空间 小 一 点 的 ， 一 般 会 用 .gif 后 级 和 .png 
后 绥 的 图 片 。 如 果 是 想 让 网 站 的 图 片 清晰 度 高 一 点 ， 一 般 使 用 .jpg 后 级 的 图 片 。.bmp 图 片 
由 于 清晰 度 不 高 ， 容 量 较 大 ， 也 比较 少 使 用 。 


5.2 设置 背景 图 像 


有 时 候 为 了 美观 ， 设 计 师 会 在 网 页 的 背景 里 插入 图 片 ， 这 就 是 背景 图 像 。background 
属性 就 是 用 来 设置 背景 图 像 的 。 当 图 像 大 小 不 能 填 满 背景 时 ， 它 可 以 使 背景 图 像 根据 网 页 
的 大 小 自动 复制 多 个 图 像 来 覆盖 满 一 个 网 页 的 背景 。 链 接 的 图 像 可 以 是 jpg 格式 的 ， 也 可 
以 是 gif 格式 的 。background 属性 的 语法 结构 如 下 : 

<body background="#"> <!-- 设 置 网 页 背景 图 像 --> 

</body> 

其 中 ，# 号 填写 的 是 图 片 的 路 径 。 具 体 的 路 径 写法 会 在 下 面 一 节 详细 讲述 。 

【示例 5.1】 下 面 是 使 用 background 属性 实现 网 页 背景 图 像 的 效果 ， 新 建 了 一 个 文件 夹 
Cimages) ， 再 把 图 片 5.1.jpg 放 在 文件 夹 里 。 代 码 如 下 : 

<body background="images/5.1.jpg"> <! 一 -设置 网 页 背景 图 像 --> 

</body> 


效果 如 图 5.1 所 示 。 
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5.1 使 用 background 属性 实现 网 页 背景 图 像 效果 图 


全 注意 ; 使 用 的 背景 图 片 尽量 不 要 太 大 ， 最 好 能 不 超过 10KB。 因 为 要 把 网 页 的 背景 全 部 
下 载 下 来 是 需要 时 间 的 ， 如 果 图 片 太 大 ， 会 影响 网 站 的 浏览 速度 。 


5.3 图 像 标 签 <img> 


在 网 页 中 ， 如 果 整 个 页 面 都 是 文字 ， 那 样 会 显得 很 单调 ， 浏 览 者 看 多 了 只 会 觉得 枯燥 
乏味 。 这 时 候 我 们 只 需要 在 网 页 中 加 入 图 片 进行 进一步 的 修饰 ， 就 会 给 网 页 带 来 很 大 的 生 
机 。<img> 标 签 的 作用 就 是 在 网 页 中 插入 图 片 。<img> 标 签 是 单 标签 ， 所 以 在 使 用 时 需要 在 
<img> 标 签 里 加 一 个 “/” 号 。<img> 标 签 中 含有 很 多 属性 ， 本 节 就 来 讲解 <img> 标 签 中 的 一 
些 重 要 属性 。 


5.3.1 选择 路 径 src 


路 径 就 是 告诉 浏览 器 图 片 的 具体 位 置 。 想 要 插入 图 片 ， 就 需要 插入 正确 的 路 径 。<img> 
标签 中 的 src 属性 就 是 用 来 为 图 片 插入 正确 的 路 径 的 。 其 语法 结构 如 下 : 

<img src=" 图 片 路 径 ” /> <! 一 设置 插入 图 片 --> 

这 里 的 路 径 写 法 和 超 链接 的 路 径 写 法 是 一 样 的 。 

【示例 $.2】 下 面 是 使 用 src 属性 来 插入 图 片 的 效果 ， 代 码 如 下 : 
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<img src="../images/5.2.jpg" /><br/> <!-- 设 置 插入 图 片 --> 
上 面 是 插入 的 图 片 
效果 如 图 5.2 所 示 。 
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上 面 是 插入 的 图 片 


图 5.2 使 用 src 属性 来 插入 图 片 效 果 图 


5.3.2 ”替换 文本 alt 


替换 文本 alt 属性 是 告诉 浏览 器 在 图 片 无 法 显示 或 不 存在 的 时 候 ， 提 供 文字 描述 ， 以 
告诉 浏览 者 这 个 图 片 所 代表 的 含义 。alt 属性 是 要 在 有 src 属性 的 情况 下 才 有 用 的 ， 一 般 写 
在 src 属性 后 面 。 其 语法 结构 如 下 : 

<img src=" 路 径 "” alt=" 文 字 描述 ” /> <!-- 设 置 插入 图 片 并 增加 图 片 替换 文本 --> 

其 中 ， 文 字 描 述 就 是 图 片 的 蔡 换文 本 。 

【示例 $.3】 下 面 是 使 用 alt 属性 来 说 明 图 片 的 效果 ， 在 images 文件 夹 下 是 没有 5.3.jpg 
的 图 片 的 。 代 码 如 下 : 

<img src="images/5.3.jpg”alt=" 这 里 是 图 5.3" /> 

<!-- 设 置 插入 图 片 并 增加 图 片 替换 文本 --> 


效果 如 图 5.3 所 示 。 


图 5.3 使 用 alt 属性 来 说 明 图 片 效果 图 
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S33 片 宽 度 width 


在 网 页 中 插入 图 片 时 使 用 width 属性 ， 是 可 以 设置 插入 的 图 片 的 宽度 的 。 在 设置 了 图 
片 宽度 以 后 ， 图 片 会 根据 指定 的 宽度 适当 地 调整 图 片 的 高 度 。width 属性 和 alt 属性 用 法 一 
样 。 其 语法 结构 如 下 : 

<img src=" 路 径 ”width=" 宽 度 ” /> <!-- 设 置 插入 图 片 并 设置 图 片 的 宽度 --> 

【示例 $5.4】 下 面 是 使 用 width 属性 来 显示 图 片 宽度 的 效果 ， 代 码 如 下 : 


<img src="../images/5.4.jpg" width="400Px" /> 
<!-- 设 置 插入 图 片 并 设置 图 片 的 宽度 为 400px--> 


效果 如 图 5.4 所 示 。 


图 5.4 使 用 width 属性 来 显示 图 片 宽度 效果 图 


全 注意 ; 在 网 站 使 用 中 如 果 图 片 过 大 ， 可 以 通过 width 属性 来 对 图 片 进行 适当 的 缩小 。 


5.3.4 图 片 高 度 height 


和 设置 图 片 的 宽度 一 样 , 在 网 页 中 插入 图 片 的 时 候 也 是 可 以 设置 图 片 的 高 度 的 。height 
属性 就 是 用 来 设置 图 片 的 高 度 。 在 设置 了 图 片 高 度 ， 没 设置 图 片 宽度 的 时 候 ， 图 片 会 根据 指 
定 的 高 度 适当 地 调整 图 片 的 宽度 。height 属性 和 width 属性 的 用 法 一 样 。 其 语法 结构 如 下 : 

<img src=" 路 径 ”height=" 高 度 ” /> <!-- 设 置 插入 图 片 并 设置 图 片 的 高 度 --> 

【示例 5.5】 下 面 是 使 用 height 属性 来 显示 图 片 高 度 的 效果 ， 代 码 如 下 : 


<img src="../images/5.4.jpg" height="300px" width="300px"/> 
<!-- 设 置 插入 图 片 并 设置 图 片 的 高 度 为 300px, 宽度 为 300px--> 


。5] 。 


第 1 篇 HTML 网 站 开发 


效果 如 图 5.5 所 示 。 


图 5.5 使 用 height 属性 来 显示 图 片 高 度 效果 图 


5.3.5 图 片 排版 align 


插入 图 片 后 ， 我 们 还 可 以 对 图 片 进行 排版 ， 让 它 出 现在 想 出 现 的 地 方 。<img> 标 签 中 
的 align 属性 就 可 以 设 定 图 片 出 现 的 位 置 。 其 语法 结构 如 下 : 
<img src=" 路 径 " align="#"/> <!-- 设 置 插入 图 片 并 对 图 片 设置 绝对 底部 对 齐 --> 


其 中 ， 在 align 属性 里 的 值 常用 的 有 5 个 ， 如 表 5.1 所 示 。 
表 5.1 align 的 属性 值 
属性 值 描述 
bottom 设置 图 片 出 现 的 位 置 是 与 文字 最 底部 对 齐 
left 设置 图 片 出 现 的 位 置 是 左 对 齐 
right 设置 图 片 出 现 的 位 置 是 右 对 齐 
middle 设置 图 片 出 现 的 位 置 是 居中 对 齐 
top 设置 图 片 出 现 的 位 置 是 顶端 对 齐 
1. 底部 对 齐 


底部 对 齐 bottom 是 把 图 片 设置 在 每 行 的 最 底 端 位 置 。 当 图 片 是 插 在 文字 中 ,可 以 设置 
图 片 和 同一 行 的 文字 的 底部 对 齐 ， 适 用 于 文字 和 图 片 并 存在 同一 行 上 。 其 语法 形式 如 下 : 

<img src=" 路 径 ” align="bottom"/> <!-- 设 置 插入 图 片 并 对 图 片 设置 底部 对 齐 --> 

【示例 5.6】 下 面 是 使 用 align= "bottom" 来 设置 图 片 底部 对 齐 的 效果 。 在 本 例 中 加 入 了 
一 些 文字 ， 以 使 效果 更 加 明显 ， 代 码 如 下 : 
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下 面 是 一 张 图 <br /> 

这 是 一 张 <img src="../images/5.5.jpg" width="140" height="120" align= 
"bottom"/> 以 文字 底部 对 齐 的 图 <br /> ”<!-- 设 置 插入 图 片 并 对 图 片 设 置 底部 对 齐 --> 
RD/ > 


这 是 一 张 以 文字 底部 对 齐 的 图 
效果 如 图 5.6 所 示 。 


FC A fle 
下 面 是 一 张 图 


这 是 一 国 以 文字 底部 对 齐 的 图 
这 是 一 张 以 文字 底部 对 齐 的 图 


图 5.6 使 用 align= "bottom" 设 置 图 片 底部 对 齐 效 果 图 


全 注意 ; 在 默认 属性 中 ， 图 片 的 对 齐 方式 是 bottom。 
2. 左 对 齐 
左 对 齐 left 是 把 图 片 设 置 在 每 行 的 最 左边 位 置 ， 此 属性 值 适用 于 图 片 放 在 文字 前 头 。 
当 图 片 是 放 在 文字 前 头 时 ， 图 片 效果 居 左 后 ， 后 面 的 文字 无 论 有 多 少 行 ， 只 要 不 超过 图 片 
的 高 度 ， 都 会 放 在 图 片 的 右边 。 其 语法 结构 如 下 : 
<img src=" 路 径 "” align="left"/> <!-- 设 置 插入 图 片 并 对 图 片 设 置 以 左 对 齐 --> 
【示例 $5.7】 下 面 是 使 用 align= "left" 来 设置 图 片 左 对 齐 的 效果 ， 代 码 如 下 : 
这 里 是 一 张 图 <br /> 
<img src="../images/5.1.jpg" width="140" height="120" align="left"/> 
这 是 一 张 以 左 对 齐 的 图 <br /> 这 是 一 张 以 左 对 齐 的 图 <br /> 这 是 一 张 以 左 对 齐 的 图 <br /> 
这 是 一 张 以 左 对 齐 的 图 <br /> 
这 是 一 张 以 左 对 齐 的 图 


效果 如 图 5.7 所 示 。 


4 3 C fi Ofle//F/b | 
这 里 是 一 张 图 


这 是 一 张 以 左 对 齐 的 图 
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转 


张 以 二 对 弃 的 图 


图 5.7 使 用 align= "left" 设 置 图 片 堪 对 齐 效果 图 
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3. 居中 对 齐 
居中 对 齐 middle 是 把 图 片 设置 在 以 高 度 为 相对 位 置 的 居中 。 当 图 片 是 插 在 文字 中 ， 可 
以 设置 图 片 居中 在 同一 行 的 文字 上 。 其 语法 结构 如 下 : 
<img src=" 路 径 "” align="middle"/> <!-- 设 置 插入 图 片 并 对 图 片 设置 居中 对 齐 --> 
【示例 5.8】 下 面 是 使 用 align= "middle" 来 设置 图 片 居中 对 齐 的 效果 ， 代 码 如 下 : 
下 面 是 一 张 图 <br /> 
这 是 一 张 <img src="../images/5.4.jpg" width="140" height="120" align= 
"midqdle"/> 以 居中 对 齐 的 图 <br /> <!-- 设 置 插入 图 片 并 对 图 片 设置 居中 对 齐 --> 


<br /> 


这 是 一 张 居 中 对 齐 的 图 
效果 如 图 5.8 所 示 。 


f 


4 CC Ofile///F/bj 
下 面 是 一 张 图 


和 以 居中 对 齐 的 图 


这 是 一 张 居 中 对 齐 的 图 


图 5.8 使 用 align= "middle" 设 置 图 片 居中 对 齐 效 果 图 


全 说 明 : 绝对 居中 align= "absmiddle" 和 相对 居中 align= "middle" 的 显示 效果 基本 上 是 一 样 
的 ， 只 是 在 定义 上 有 所 不 同 。 


4. 右 对 齐 
右 对 齐 right 是 把 图 片 设置 在 每 行 的 最 右边 位 置 。 当 图 片 右 对 齐 后 , 后 面 的 文字 无 论 有 
多 少 行 ， 只 要 不 超过 图 片 的 高 度 ， 都 会 放 在 图 片 的 左边 。 其 语法 结构 如 下 : 

<img src=" 路 径 " align="right"/> <!-- 设 置 插入 图 片 并 对 图 片 设 置 以 右 对 齐 --> 

【示例 $.9】 下 面 是 使 用 align= "right" 来 设置 图 片 右 对 齐 的 效果 ， 代 码 如 下 : 

这 里 是 一 张 图 <br /> 
<img src="images/5.1.jpg" width="140" height="120" align="right"/> 
这 是 一 张 以 右 对 齐 的 图 <br /> 这 是 一 张 以 右 对 齐 的 图 <br /> 这 是 一 张 以 右 对 齐 的 图 <br /> 
这 是 一 张 以 右 对 齐 的 图 <br /> ”<!-- 设 置 插入 图 片 并 对 图 片 设置 以 右 对 齐 --> 


> 


这 是 一 张 以 右 对 齐 的 图 
效果 如 图 5.9 所 示 。 
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em ”< 

全 仿 CG 给 昌 file:///F:/bj/ 新 建文 件 夹 /4.4.html 窑 和 
这 里 是 一 张 图 

这 是 一 张 以 右 对 齐 的 图 。 J 

这 是 一 张 以 右 对 齐 的 图 


这 是 一 张 以 右 对 齐 的 图 
这 是 一 张 以 右 对 齐 的 图 


这 是 一 张 以 右 对 齐 的 图 


图 5.9 使 用 align= "right" 设 置 图 片 右 对 齐 效果 图 


5. 顶端 对 齐 
顶端 对 齐 top 是 把 图 片 设置 在 每 行 的 最 顶部 位 置 。 当 图 片 是 插 在 文字 中 ， 可 以 设置 图 


片 和 同一 行 的 文字 以 顶端 对 齐 显示 。 其 语法 结构 如 下 : 


<img src=" 路 径 "align="top"/> <!-- 设 置 插入 图 片 并 对 图 片 设 置顶 端 对 齐 --> 
【示例 $.10】 下 面 是 使 用 align= "top" 来 设置 图 片 顶端 对 齐 的 效果 ， 代 码 如 下 


这 里 是 一 张 图 <br /> 
这 是 一 张 <img src="../images/5.5.jpg" width="140" height="120" align= 
"top" /> 顶端 对 齐 的 图 <br /> <!-- 设 置 插入 图 片 并 对 图 片 设 置顶 端 对 齐 --> 
<bR > 


这 是 一 张 顶端 对 齐 的 图 
效果 如 图 5.10 所 示 。 


fr 


这 是 一 张 顶 端 对 齐 的 图 


5.10 ”使 用 align= "top" 设 置 图 片 顶 端 对 齐 效果 图 


5.3.6 ” 设 定 边框 border 


图 片 在 使 用 的 时 候 ， 有 时 会 由 于 有 背景 图 片 的 关系 ， 使 得 图 片 与 背景 图 片 难以 区 分 ， 
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这 时 可 以 给 图 片 添加 一 个 边框 来 区 分 或 者 突显 图 片 。<img> 标 签 里 的 border 属性 ， 就 是 用 
来 设置 图 片 的 边框 。 但 是 border 属性 只 能 对 边框 的 粗细 进行 设置 ， 不 能 做 其 他 样式 的 改变 
(在 第 13 章 将 会 详细 讲述 边框 其 他 样式 的 用 法 ) 。 其 语法 结构 如 下 : 

<img src=" 路 径 " border="n" /> <!-- 设 置 插入 图 片 并 对 图 片 设置 边框 -=-> 

其 中 ,，n 是 用 来 填写 边框 的 大 小 ， 而 默认 的 边框 颜色 则 为 黑色 。 

【示例 $.11】 下 面 是 使 用 border 属性 为 图 片 添加 边框 的 效果 ， 代 码 如 下 : 


<img src="../images/5.1.jpg" border="4Px"/> 
<! 一 -设置 插入 图 片 并 对 图 片 设置 边框 粗细 为 4px--> 


效果 如 图 5.11 所 示 。 


图 5.11 使 用 border 属性 为 图 片 添加 边框 效果 图 


5.3.7 图 像 间距 


上 面 的 例子 可 以 看 出 ， 通 常 浏览 器 不 会 在 图 片 和 其 周围 的 文字 之 间 留 出 很 多 空间 ， 
会 显得 拥挤 。 有 时 候 为 了 美观 ， 会 让 文字 和 图 像 之 间 留 出 更 大 的 空白 。 这 时 候 就 需要 设置 
图 片 的 水 平 问 距 和 垂直 间距 。<img> 标 签 中 可 以 通过 hspace 和 vapace 属性 来 分 别 设置 图 片 
的 水 平和 垂直 间距 。 其 语法 结构 如 下 : 


<img src=" 路 径 ”hspace="n" /> <!-- 设 置 插入 图 片 并 对 图 片 设置 水 平 间距 --> 
<img src=" 路 径 " vspace="n" /> <!-- 设 置 插 入 图 片 并 对 图 片 设置 垂直 问 距 --> 


其 中 ，n 是 用 来 填写 水 平和 垂直 间距 的 大 小 。 下 面 通过 例子 来 了 解 这 两 个 属性 。 
【示例 $.12】 下 面 是 使 用 hspace 属性 为 图 片 设置 水 平 距 离 的 效果 。 需 要 注意 的 是 此 属 
性 对 正 7 并 不 产生 作用 ， 而 在 谷歌 、Firefox 浏览 器 里 可 以 产生 作用 。 代 码 如 下 : 
这 是 一 张 图 片 <br/> 
左边 距离 60px<img src=". ./images/5.5.jpg" hspace="60px"/> 右 边 距离 60px 
<! 一 -设置 插入 图 片 并 对 图 片 设置 水 平 间 距 60px --> 


效果 如 图 5.12、 图 5.13 所 示 。 
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One > 
3C A @file//FVbi 
这 是 一 张 图 片 


右边 距离 60px 


左边 距离 60px 


图 5.13 谷歌 浏览 器 显示 水 平 间距 设置 效果 


【示例 5.13】 下 面 是 使 用 vspace 属性 为 图 片 设置 垂直 间距 的 效果 。 与 hspace 属性 不 同 
的 是 ，vspace 属性 在 正 和 谷歌 浏览 器 里 都 可 以 正常 显示 。 代 码 如 下 : 
上 边 距离 60px<br /> 
<img src="../images/5.5.jpg" vspace="60 px " /><br /> 
<!-- 设 置 插 入 图 片 并 对 图 片 设置 垂直 间距 60px --> 
下 边 边 距 离 60px 


效果 如 图 5.14、 图 5.15 所 示 。 


om - 
二 斌 C 在 OhleW/FVbj/Sj 旭 文件 究 以 


上 边 距 离 60px 


下 边 边 距 高 60px 
下 边 边 距离 60px 


有 100% ~ 


图 5.14 下 浏览 器 显示 垂直 间距 设置 效果 图 5.15 谷歌 浏览 器 显示 垂直 间距 设置 效果 
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5.4 图 像 超 链接 


在 第 4 章 的 时 候 ， 已 经 讲解 过 超 链接 的 用 法 。 但 很 多 时 候 使 用 文本 内 容 超 链 接 是 不 够 
的 ， 页 面 里 的 菜单 、 栏 目 等 很 多 地 方 都 需要 用 到 图 像 的 链接 。 创 建 图 像 超 链接 和 页 面 的 超 
链接 在 方法 上 是 比较 相似 的 ， 都 是 使 用 <a> 标 签 ， 但 图 像 超 链接 比 页 面 的 超 链接 多 出 了 很 
多 的 用 法 。 图 像 超 链接 是 把 <img> 标 签 嵌 套 在 <a> 标 签 里 面 。 本 节 就 来 讲解 图 像 超 链接 的 
用 法 。 


5.4.1 本 地 图 像 链接 


本 地 图 像 链接 就 是 链接 的 图 像 和 被 链接 的 图 像 在 同一 个 网 站 里 面 。 制 作 图 像 超 链接 也 
是 用 href 属性 来 实现 的 ， 其 用 法 和 第 4 章 所 讲 的 用 法 一 样 ， 这 里 将 不 再 阐述 。 本 地 图 像 链 
接 语 法 结构 如 下 : 

<a href=" 被 链接 图 像 的 路 径 "><img src=" 链 接 图 像 地 址 "” /></a> 

<!-- 设 置 插入 图 片 并 对 图 片 设 置 链接 --> 

其 中 ，<img> 标 签 是 被 包含 在 <a> 标 签 里 面 的 。 

【示例 $.14】 下 面 是 使 用 href 属性 实现 本 地 图 像 链接 的 效果 ， 这 里 使 用 的 链接 图 片 是 
5.2.jpg， 被 链接 图 片 是 5.4.jpg。 代 码 如 下 。 

<a href="../images/5.4.jpg"><img src="../images/5.2.jpg" /></a> 


<!-- 设 置 插 入 图 片 并 对 图 片 设置 链接 --> 
效果 如 图 5.16、 图 5.17 所 示 。 


习 | 


54jpg C15x134) 
€ DC @file//FVbj 


Ee 


图 5.16 使 用 href 属性 实现 图 像 链 接 图 5.17 使 用 href 属性 实现 图 像 链接 
图 像 的 链接 前 效果 图 图 像 的 链接 后 效果 图 


全 技巧 : 可 以 看 到 当 把 鼠标 放 在 图 片上 时 ,图 5.16 里 的 图 像 左 下 方 就 会 出 现 被 链接 的 图 像 
的 路 径 。 
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5.4.2 ”站 外 图 像 链 接 


站 外 图 像 链接 就 是 链接 的 图 像 和 被 链接 的 图 像 不 在 同一 个 网 站 里 面 。 站 外 图 像 链 接 和 
第 4 章 讲 的 URL 链接 很 相似 ， 只 是 把 链接 地 址 改 成 站 外 图 片 地 址 就 可 以 了 。 其 语法 结构 
如 下 : 

<a href=" 被 链接 图 像 的 地 址 "><img src=" 链 接 图 像 地 址 ” /></a> 

<!-- 设 置 插入 图 片 并 对 图 片 设置 链接 --> 

【示例 S.1S】 下 面 是 使 用 href 属性 实现 站 外 图 像 链接 的 具体 效果 ， 这 里 使 用 的 链接 图 
片 是 5.1jpg， 被 链接 图 像 是 网 上 的 一 个 图 片 。 代 码 如 下 : 

<a href="http://www.baidu.com.cn/upimg/allimg/071025/1326160.jpg"><img src= 

"../images/5.1.jpg"/></a> <!-- 设 置 插入 图 片 并 对 图 片 设 置 链接 --> 


效果 如 图 5.18、 图 5.19 所 示 。 


i [ay | | = | 
j On - Ba 省 ar ED wwew Gl ww Ia A 才 


DCH Qfile//rF/bj 以 


www.baidu.com.cn/upimg/allimg/071025/1326160jpg 


图 5.18 使 用 href 属性 实现 站 外 图 像 图 5.19 使 用 href 属性 实现 站 外 图 像 
链接 的 链接 前 效果 图 链接 的 链接 后 效果 图 


全 注意 : 使 用 URL 链接 时 ， 链 接 到 图 像 的 网 址 不 用 在 后 面 加 /号 。 


5.4.3 创建 图 像 矩 形 热点 区 域 


区 域 这 三 种 。 这 里 要 讲 的 是 矩形 热点 区 域 ， 它 是 指 热 点 区 域 的 形状 是 矩形 的 ， 这 是 热点 区 
域 中 最 常用 的 形状 。 其 语法 形式 如 下 : 


<img src=" 图 片 路 径 ”usemap="# 图 的 名 称 ” /> 
<!-- 设 置 插入 图 片 并 对 图 片 设置 热点 区 域 --> 
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<map name=" 图 的 名 称 "> <!-- 设 置 热点 区 域 开 始 --> 
<area shape="rect" coords=" 和 矩 形 坐 标 "”href=" 被 链接 地 址 "> 
</map> <!-- 设 置 热点 区 域 结束 --> 


其 中 ，usemap="# 图 的 名 称 "， 在 名 称 前 要 记得 加 # 号 才 可 以 使 用 。shape="rect"，shape 
属性 用 来 定义 热点 区 域 的 形状 ， 当 热点 区 域 是 矩形 时 ， 要 使 用 rect。coords=" 和 矩形 坐标 "， 
coords 属性 是 用 来 规定 热点 区 域 出 现 的 位 置 , 这 里 有 四 个 值 分 别 是 矩形 的 左上 角 x、y 坐标 
和 右 下 角 x、y 坐标 ， 可 以 根据 出 现 的 位 置 不 同 进行 更 改 。hre 全 "被 链接 地 址 "，href 属性 用 
来 填写 热点 区 域 的 超 链 接地 址 。 

【示例 $5.16】 下 面 是 使 用 矩形 热点 区 域 的 效果 ， 代 码 如 下 : 


<img src="../images/5.1.jpg" usemap="#Map" /> 
<! 一 -设置 插入 图 片 并 对 图 片 设置 热点 区 域 --> 


<map name="Map"> <!-- 设 置 热点 区 域 开 始 --> 
<area shape="rect" coords="21,35,100,95" href="5.2.jpg"> 
</map> <!-- 设 置 热点 区 域 结 束 --> 
效果 如 图 5.20 所 示 。 
Dw Wm 0 & wi .| Ea 


文 伯 ( 各 名 (E) 查看 (V) 颖 入 (1) 修改 (M) 格式 (0) 命令 (CQ) 站 点 (S) 窗口 (W) 帮助 (H) 


FUD 骨 建文 件 夫 VAhtmi 


WW- © 收 


ENF 


图 5.20 ”使 用 矩形 热点 区 域 效果 图 (Dreamweaver) 
在 上 图 可 以 看 到 ， 图 片 中 蓝 色 部 分 为 热点 区 域 所 在 位 置 。 这 是 在 Dreamweaver 里 才 可 
以 看 到 的 ， 在 浏览 器 中 是 看 不 到 这 个 蓝 色 部 分 的 ， 但 把 鼠标 放 在 热点 区 域 上 ， 可 以 发 现 鼠 
标 样式 发 生 改变 ， 如 图 5.21 所 示 。 


5.4.4 创建 图 像 圆 形 热点 区 域 
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为 圆 形 . 圆 形 热点 区 域 只 需要 在 算 形 热点 区 域 的 基础 上 ,把 shape="rect" 改 成 shape="circle"， 
再 对 coords 属性 进行 位 置 控 制 就 可 以 了 。 其 语法 形式 如 下 : 


图 5.21 使 用 矩形 热点 区 域 效果 图 (浏览 器 ) 
<img src=" 图 片 路 径 " usemap="# 图 的 名 称 " /> <!-- 设 置 插入 图 片 并 对 图 片 设置 热点 区 域 --> 


<map name=" 图 的 名 称 "> <!-- 设 置 热点 区 域 开 始 --> 
<area shape="circle" coords=" 圆 形 坐 标 ” href=" 被 链接 地 址 "> 
</map> <!-- 设 置 热点 区 域 结束 --> 


其 中 ，coords=" 圆 形 坐 标 "， 圆 形 坐 标 共 有 三 个 值 ， 前 两 个 值 是 圆心 的 x、y 坐标 ， 第 
三 个 值 是 指 圆 形 的 半径 。 

【示例 S.17】 下 面 是 使 用 圆 形 热点 区 域 的 效果 ， 这 里 为 了 让 效果 明显 ， 会 直接 使 用 
Dreamweaver 来 进行 效果 预览 。 代 码 如 下 : 


<img src="../images/5.4.jpg" usemap="#Map" /> 
<!-- 设 置 插入 图 片 并 对 图 片 设 置 热点 区 域 --> 


<map name="Map"> <!-- 设 置 热点 区 域 开始 --> 

<area shape="circle" coords="60,80,40" href="5.2.jpg"> 
</map> <!-- 设 置 热点 区 域 结束 --> 
效果 如 图 5.22 所 示 。 


[和 人 TH | 二 拓 玫 二 以 巴 Ee | 


图 5.22 使 用 圆 形 热点 区 域 效果 图 (Dreamweaver) 
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到 的 效果 和 图 5.21 一 样 ， 这 里 不 再 举例 。 


5.4.5 创建 图 像 多 边 热点 区 域 


热点 区 域 的 基础 上 ， 把 shape="rect" 改 成 shape="poly"， 再 对 coords 属性 进行 位 置 控 制 就 可 
以 了 。 其 语法 格式 如 下 : 


<img src=" 图 片 路 径 ”usemap="# 图 的 名 称 "” /> <!-- 设 置 插入 图 片 并 对 图 片 设置 热点 区 域 --> 


<map name=" 图 的 名 称 "> <!-- 设 置 热点 区 域 开 始 --> 
<area shape="poly" coords=" 多 边 形 坐 标 " href=" 被 链接 地 址 "> 
</map> <!-- 设 置 热点 区 域 结束 --> 


其 中 ， 其 中 ，coords=" 多 边 形 坐标 "， 多 边 形 坐 标 可 以 有 任意 个 值 。 想 创建 多 少 点 来 组 
成 边 ， 就 填写 多 少 个 坐标 值 。 只 需要 把 多 边 形 的 每 一 个 转折 点 坐标 依次 写 上 即 可 。 

【示例 $.18】 下 面 是 使 用 多 边 热 点 区 域 的 具体 效果 ， 这 里 为 了 让 效果 明显 ， 会 直接 使 
用 Dreamweaver 来 进行 效果 预览 。 代 码 如 下 。 


<img src="../images/5.5.jpg" usemap="#Map" /> 
<! 一 -设置 插入 图 片 并 对 图 片 设置 热点 区 域 --> 


<map name="Map"> <!-- 设 置 热点 区 域 开 始 --> 
<area shape="poly" coords="33,43,28,79,89,82,113,43" href="5.2.jpg"> 
</map> <! 一 -设置 热点 区 域 结束 --> 
效果 如 图 5.23 所 示 。 
Dw Mr 0 &r a . [Fe 


文件 (有 ”六 坊 (5) ”可 看 (V) 插入 (1 修改 (M) 楼 式 (0) 命令 (站 点 (S) 宣 D(W 


FE 利文 攻关 4 4 html 


Si8 x 19v 1K/1 秘 Uni 


~ | 字体 (0) 默认 字体 
Xk 右 ”-[“-] 同 
到 


图 5.23 ”使 用 多 边 热点 区 域 效果 图 (Dreamweaver) 


可 以 看 到 ， 图 片 中 的 热点 区 域 为 多 边 形 。 这 里 的 coords="33,43,28,79,89,82,113,43"， 
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每 创建 一 个 点 需要 两 个 坐标 值 ， 因 此 创建 的 多 边 形 是 四 边 形 。 这 是 在 Dreamweaver 里 看 到 
的 ， 在 浏览 器 中 看 到 的 效果 和 图 5.23 一 样 ， 这 里 不 再 举例 。 


全 注意 : 或 许 热点 区 域 在 图 片 使 用 上 会 带 来 很 多 方便 的 地 方 ， 但 是 请 尽量 少 用 ， 因 为 热点 
区 域 可 能 会 因为 分 辩 率 和 显示 器 的 不 同 ， 而 出 现 移 位 。 


5.4.6 图 像 占 位 符 


图 像 占 位 符 ， 就 是 在 网 页 中 插入 一 个 “ 空 ” 的 图 像 ， 该 图 像 是 一 个 虚拟 的 图 像 ， 并 没 
有 真正 的 源 文 件 。 图 像 占 位 符 的 作用 是 在 网 页 上 占据 一 个 位 置 ， 当 还 没准 备 好 要 插入 的 图 
片 的 时 候 ， 可 以 先 用 图 像 占 位 符 占 一 个 位 置 ， 以 作 标记 。 其 语法 结构 如 下 : 

<img name=" 占 位 符 名 字 " src="" width=" 占 位 符 宽度 " height=" 占 位 符 高 度 " 

background-color=" 占 位 符 背景 颜色 "” /> <!-- 设 置 图 像 占 位 符 -=-> 

其 中 ，name 是 占 位 符 的 名 字 。width 和 height 是 用 来 控制 占 位 图 的 宽度 和 高 度 的 。 为 
了 在 Dreamweaver 里 可 以 很 明显 地 看 出 占 位 图 ， 必 须 使 用 background-color 来 给 占 位 图 添 
加 背景 颜色 。 当 想 用 图 片 来 代替 占 位 符 ， 只 要 直接 在 src="" 里 填写 图 片 的 链接 地 址 就 可 
以 了 。 

【示例 5.19】 下 面 是 使 用 图 像 占 位 符 的 效果 。 这 里 为 了 让 效果 明显 ， 会 使 用 Dreamweaver 
来 进行 效果 预览 。 代 码 如 下 : 

<img name="image" src="" width="250" height="150" background-color= 

w#CCCCCC™ / > <!-- 设 置 图 像 占 位 符 --> 


效果 如 图 5.24 所 示 。 


图 5.24 使 用 图 像 占 位 符 效 果 图 (Dreamweaver) 
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各 技巧 : 在 占 位 符 上 显示 了 名 字 和 宽度 、 高 度 ， 让 设计 师 在 更 换 图 片 时 更 好 操作 。 


占 位 符 在 浏览 器 上 是 显示 不 出 来 的 ， 只 能 看 到 宽度 和 高 度 的 一 个 显示 不 出 来 的 图 ， 如 
图 5.25 所 示 。 


二 
I Prem EE 


文件 (和 )” 帝 狂 (E) ”查看 (V) 收藏 闪 (A) 工具 4” 


图 5.25 使 用 图 像 占 位 符 效果 图 (浏览 器 ) 


5.5 ”插入 视频 文件 
使 用 <img> 标 签 不 但 可 以 插入 图 片 ， 还 可 以 插入 视频 格式 的 文件 。 本 节 来 讲解 如 何 使 
用 路 径 来 插入 视频 ， 以 及 如 何 设 置 循环 播放 次 数 和 播放 方式 。 
5.5.1 使 用 路 径 dynsrc 


插入 视频 文件 和 插入 图 像 一 样 ， 也 需要 在 <img> 标 签 里 加 入 一 个 路 径 来 实现 。dynsrc 
属性 就 是 用 来 填写 视频 文件 的 路 径 。 其 语法 结构 如 下 。 

<img dynsrc=" 视 频 文件 路 径 "” /> <!-- 插 入 视频 文件 --> 

【示例 5.20】 下 面 是 使 用 dynsrc 属性 来 实现 播放 视频 文件 的 效果 。 代 码 如 下 : 


<img dynsrc="../images/Wildlife.wmv" /> <!-- 插 入 视频 文件 --> 
效果 如 图 5.26 所 示 。 


5.5.2 ”循环 播放 次 数 loop 


插入 视频 后 ， 如 果 不 对 其 进行 循环 播放 设置 ， 浏 览 器 会 默认 只 播放 一 次 。 但 有 时 候 我 
们 希望 插入 的 视频 能 够 一 直 循环 播放 下 去 。 这 时 候 就 可 以 使 用 loop 属性 用 来 设置 视频 播放 
的 循环 次 数 。 其 语法 结构 如 下 : 

<img dynsrc=" 视 频 文件 路 径 " loop="n" /> <!-- 插 入 视频 文件 并 设置 播放 次 数 --> 
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本 ET 一 | 
(DPOB am o- ox|S me "EE 


文件 (有 ]” 蝙 强 (E) 坦 看 (V) 收藏 交 (A) 工具 (T) 帮助 (H) 


图 5.26 使 用 dynsrc 属性 来 实现 播放 视频 文件 效果 图 


其 中 ，n 是 用 来 填写 循环 播放 的 次 数 。 当 n=-1 时 ， 表 示 无 限 循 环 。 值 得 注意 的 是 ，n 
除了 填写 -1 这 个 负数 之 外 ， 其 他 数值 均 为 正 数 。 
【示例 5.21】 下 面 是 使 用 loop 属性 来 实现 循环 播放 视频 文件 的 效果 。 代 码 如 下 : 


<img dynsrc="../images/Wildlife.wmv" loop="3"/> 
<!-- 插 入 视频 文件 并 设置 循环 播放 次 数 为 3 次 --> 


当 设置 了 loop 属性 后 ， 视 频 播放 完 一 遍 以 后 ， 会 自动 进行 循环 播放 。 
5.5.3 播放 方式 start 


通过 <img> 标 签 中 的 start 属性 可 以 设置 视频 文件 的 播放 方式 。 共 有 两 种 播放 方式 ， 一 
种 是 网 页 载 入 时 就 开始 播放 ; 一 种 是 当 鼠 标 移动 到 视频 上 时 播放 。 其 语法 形式 如 下 : 

<img dynsrc=" 视 频 文件 路 径 " start="n" /> <!-- 插 入 视频 文件 并 设置 播放 格式 --> 

其 中 ，n 有 两 个 值 ， 当 start="fileopen" 时 ， 可 以 设置 视频 文件 是 在 网 页 载 入 时 即 播放 ， 
这 是 默认 值 。 当 start="mouseover" 时 ， 可 以 设置 当 和 鼠标 移 到 视频 上 时 播放 。 由 于 前 面 的 示 
例 中 已 经 可 以 看 到 start="fileopen" 的 效果 ， 这 里 将 用 start="mouseover" 来 做 示例 。 

【示例 $.22】 下 面 是 使 用 start 属性 来 设置 当 鼠 标 移动 到 视频 上 时 播放 的 效果 ， 代 码 如 下 : 

<img dynsrc="../images/ Wildlife.wmv " start="mouseover" /> 


<!-- 插 入 视频 文件 并 设置 播放 格式 --> 
效果 如 图 5.27、 图 5.28 所 示 。 
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ey x > [eey™x™) 
Ca P -cx|| 瑟 ge Cj PD >x|S Ee 
文件 (] ” 妨 编 (E) ”查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 文件 {1 一 查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 


成 100% ~ 县 100% ~ 


图 5.27 ”视频 载 入 后 ， 鼠 标 没 经 过 时 的 效果 图 图 5.28 ”视频 载 入 后 ， 鼠 标 经 过 时 的 效果 图 


全 注意 ; 在 插入 视频 文件 时 ， 尽 量 不 要 插入 过 大 的 视频 和 音频 文件 ， 这 样 会 拖 慢 网 站 的 打 


开 速 度 。 
5.6 本 章 小 
本 章 主要 介绍 了 图 像 在 网 站 中 的 用 法 。 详 细 介绍 了 图 像 中 主要 标签 的 使 用 方法 ， 重 点 


介绍 了 图 像 超 链接 。 还 有 一 个 重点 就 是 使 用 <img> 标 签 来 播放 视频 文件 ， 这 也 就 使 网 站 页 
面 内 容 变 得 丰富 多 彩 。 下 一 章 将 讲解 表格 在 网 站 中 的 使 用 。 


5.7 本 章 


【习题 5-1】 图 像 的 格式 一 般 分 为 几 种 ， 分 别 有 什 么 特点 ? 

【习题 5-2】 在 网 页 中 插入 一 张 背 景 图 片 ， 效 果 如 图 5.1 所 示 。 

【习题 5-3】 在 网 页 中 插入 一 张 图 片 ， 并 设置 它 的 高 度 为 100px， 宽 度 为 200px， 边 框 
为 2px， 效 果 如 图 5.29 所 示 。 


EEC 


CA @fileWFVbi 升 立 入 


图 5.29 插入 图 片 效 果 图 
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【习题 5-4】 在 网 页 中 插入 一 张 图 片 , 并 创建 一 个 链接 , 链接 到 搜狐 网 站 , 效果 如 图 5.30 
所 示 。 
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图 5.30 创建 图 片 链接 


【习题 5-5】 在 网 页 中 插入 视频 文件 ， 并 设置 循环 播放 视频 和 当 鼠 标 移 到 视频 上 时 播放 
视频 。 效 果 如 图 5.31 所 示 。 


图 5.31 插入 视频 文件 


.67 。 


第 6 章 表格 的 使 用 


要 想 设计 有 创意 的 网 页 ， 最 强大 的 工具 之 一 就 是 表格 。 表 格 是 网 页 制作 中 常用 的 页 面 
布局 工具 。 通 过 表格 的 嵌 套 运用 可 以 对 网 页 进行 细 化 管理 ， 使 各 个 元 素 的 排列 互 不 冲突 ， 
使 页 面 的 排版 和 布局 更 加 简洁 漂亮 。 虽然 最 新 的 Web 设计 标准 中 并 不 推荐 设计 师 们 使 用 表 
格 对 网 页 进行 布局 ， 但 是 表格 以 其 简单 易 用 、 控 制 精确 的 优点 ， 仍 然 是 初学 者 学 习 的 一 个 
重要 工具 之 一 。 本 章 将 详细 讲解 表格 的 具体 内 容 。 


6.1 表格 的 基本 构成 


表格 是 由 行 和 列 组 成 的 ， 它 们 是 用 不 同 的 标签 来 进行 控制 的 。 表 格 的 基本 构成 包括 
<table>、<tr>、<td> 这 三 个 标签 。 要 创建 表格 ， 就 要 使 用 <table> 标 签 ， 以 <table> 标 签 开始 ， 
以 </table> 标 签 结束 。 要 创建 行 ， 就 要 使 用 <tr> 标 签 ， 以 <tr> 标 签 开始 ， 以 </tr> 标 签 结束 ， 
包括 在 <table> 标 签 里 面 。 要 创建 列 ， 就 要 使 用 <td> 标 签 ， 以 <td> 标 签 开始 ， 以 </td> 标 签 结 
束 ， 包 括 在 <tr> 标 签 里 面 。 这 三 个 标签 就 构成 了 最 简单 的 一 行 一 列表 格 。 其 语法 结构 如 下 : 


<table> <!-- 表 格 起 始 标签 --> 
RE <!-- 行 起 始 标签 --> 
<td> 内 容 </td> <!-- 列 起 始 标签 和 结束 标签 -=-> 
</tr> <!-- 行 结束 标签 --> 
</table> <!-- 表 格 结束 标签 --> 


在 表格 里 , 每 一 个 文本 内 容 都 是 要 添加 在 <td> 标 签 里 面 的 。 只 有 添加 在 <td> 标 签 里 面 ， 
才 可 以 被 正确 地 读 取 。 在 表格 里 ， 列 是 最 小 的 单位 ， 有 表格 必须 有 行 ， 有 行 必须 有 列 。 而 
在 标签 里 ， 可 以 增加 不 同 的 样式 来 美化 表格 。 


6.2 设置 表格 <table> 


<table> 标 签 用 来 设置 表格 ， 每 个 <table> 标 签 里 又 包含 很 多 的 行 和 列 。 上 面 介绍 了 表格 
的 基本 构成 ， 这 一 节 我 们 就 来 详细 讲解 这 些 基 本 构成 的 使 用 方法 。 


6.2.1 设置 行 标签 <tr> 


创建 表格 的 行 要 使 用 <t> 标 签 ， 它 要 写 在 <table> 标 签 里 面 。<tr> 标 签 不 能 单独 使 用 ， 
在 行 里 面 至 少 要 存在 着 一 个 列 ， 才 能 填写 网 页 内 容 。 每 次 想 添加 多 一 行 ， 都 需要 添加 多 一 
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个 <t> 标 签 ， 这 样 才 可 以 形成 一 行 。 在 上 一 节 介 绍 了 <tr> 标 签 的 基本 语法 ， 由 于 <tr> 标 签 不 


能 单独 使 用 ， 这 里 将 不 用 示例 来 对 其 进行 讲述 。 


6.2.2 设置 列 标签 <td> 


列 标签 <td> 也 叫做 单元 格 数据 标签 ， 用 来 设置 表格 的 列 。<td> 标 签 里 可 以 添加 文本 内 
容 、 图 像 和 HTML 标签 ， 故 称 为 单元 格 数据 标签 。<td> 标 签 写 在 <tr> 标 签 里 面 。 表 格 中 的 


每 行 都 至 少 包 含 一 列 ， 如 果 需 要 增加 多 列 ， 只 需要 在 <tr> 标 签 里 添加 多 个 <td> 标 签 就 可 以 


了 。 其 语法 结构 如 下 : 


<table > <!-- 表 格 开始 --> 
SEE> <!-- 表 格 行 开 始 --> 
<td> 表格 内 容 </td> <!-- 表 格 列 --> 
eVEr> <!-- 表 格 行 结束 --> 
</table> <!-- 表 格 结束 --> 


【示例 6.1】 下 面 是 使 用 <tr> 标 签 和 <td> 标 签 制作 2 行 2 列表 格 的 效果 ， 为 了 能 显示 出 
表格 边框 ， 这 里 使 用 border 属性 来 指定 边框 的 宽度 〈 将 在 下 面 详细 介绍 ) ， 代 码 如 下 : 


<table border="1"> <!-- 表 格 开始 --> 
<tr> <!-- 表 格 行 开始 --> 
<td> 第 1 行 第 1 列 </td> <!-- 表 格 列 --> 
<td> 第 工行 第 2 列 </td> <!-- 表 格 列 --> 
</tr> <!-- 表 格 行 结束 --> 
<tr> <!-- 表 格 行 开 始 --> 
<td> 第 2 行 第 1 列 </td> <!-- 表 格 列 --> 
<td> 第 2 行 第 2 列 </td> <!-- 表 格 列 --> 
</tr> <!-- 表 格 行 结束 --> 
</table> <!-- 表 格 结束 --> 
效果 如 图 6.1 所 示 。 
[ET 一 > 一 | 
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图 6.1 制作 2 行 2 列表 格 效果 图 


6.2.3 设置 表 头 单元 格 <th> 


创建 表格 有 时 候 还 需要 用 到 另 一 个 标签 <th>，<th> 标 签 是 用 来 设置 表 头 单元 格 的 格式 
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的 。 使 用 <th> 标 签 的 文本 居中 对 齐 并 显示 为 粗 体 。<th> 标 签 也 同样 写 在 <u> 标 签 里 面 。 其 
语法 结构 如 下 : 


<table> <! 一 -表格 开始 -> 
EE <! 一 -表格 行 开始 -> 
<th> 表 头 内 容 </th> <!--=- 表 头 单元 格 =-> 
<HEr> <!-- 表 格 行 结束 --> 
</table> <!-- 表 格 结束 --> 


其 中 ， 表 头 单元 格 <th> 标 签 在 这 里 相当 于 列 <td> 标 签 的 作用 。 
【示例 6.2】 下 面 是 使 用 <th> 标 签 来 实现 表 头 单元 格 设置 的 效果 。 为 了 能 显示 出 表格 边 
框 ， 这 里 使 用 border 属性 来 指定 边框 的 宽度 ， 代 码 如 下 : 


<table border="1"> <!-- 表 格 开始 --> 
<Er> <!-- 表 格 行 开 始 --> 
<th> 标 题 1</th> <!-- 表 头 单元 格 --> 
<th> 标 题 2</th> 
<th> 标 题 3</th> 
</tr> <!-- 表 格 行 结束 --> 
</table> <!-- 表 格 结束 --> 
效果 如 图 6.2 所 示 。 
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标题 1 | 标题 2 | 


图 6.2 使 用 <th> 标 签 来 实现 表 头 单元 格 效果 图 
色 注 意 : 表格 里 <table> 标 签 里 可 以 没有 表 头 单元 格 <th> 标 签 ， 但 是 不 能 没有 单元 格 数据 


<td> 标 签 。 


63 表格 属性 


表格 是 网 页 中 的 必 不 可 少 的 重要 元 素 ， 它 有 着 丰富 的 属性 ， 可 以 进行 相关 的 设置 ， 使 
得 表格 更 加 漂亮 。 本 节 将 讲述 <table> 标 签 的 属性 内 容 ， 这 些 属性 不 止 可 以 放 在 <table> 标 签 
里 ， 也 可 以 放 在 <tr> 标 签 和 <td> 标 签 里 。 


6.3.1 表格 宽度 width 


width 属性 可 以 设置 表格 的 宽度 ， 也 可 以 设置 每 列 的 宽度 。 放 在 <table> 标 签 里 ， 可 以 
用 来 设置 表格 的 总 宽度 ; 放 在 <td> 标 签 里 ， 就 可 以 用 来 设置 每 列 的 宽度 。 其 语法 结构 如 下 : 
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<table width=" 表 格 宽度 "> <!-- 表 格 开 始 --> 
Ex <!-- 表 格 行 开 始 --> 
<td width=" 列 宽度 "> 表格 内 容 </td> <!-- 表 格 列 --> 
</tr> <!-- 表 格 行 结 束 --> 
</table> <!-- 表 格 结束 --> 


【示例 6.3】 下 面 是 使 用 width 属性 来 设置 表格 宽度 的 效果 ， 代 码 如 下 : 
<table width="400px" border="1"> <!-- 表 格 开始 ， 设 置 表格 整体 宽度 为 400px--> 


<tr> <!-- 表 格 行 开始 --> 
<tqd width="100"> 列 宽度 为 100px</td> <!-- 设 置 列 宽度 为 100px--> 
<td width="200"> 列 宽度 为 200px</td> <!-- 设 置 列 宽度 为 200px--> 
</tr> <!-- 表 格 行 结束 --> 
</table> <!-- 表 格 结束 --> 
效果 如 图 6.3 所 示 。 


em > 是 了 
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列 宽度 为 100px “|| 列 宽度 为 200px 


图 6.3 使 用 width 属性 来 设置 表格 宽度 效果 图 


6.3.2 ”表格 高 度 height 


height 属性 不 仅 可 以 设置 表格 的 总 高 度 ， 还 可 以 设置 每 行 和 每 列 的 高 度 。 放 在 <table> 
标签 里 ， 可 以 用 来 设置 表格 的 总 高 度 ， 放 在 <te> 标 签 和 <td> 标 签 里 ， 就 可 以 用 来 设置 每 行 


和 每 列 的 高 度 。 需 要 注意 的 是 所 有 行 的 高 度 的 和 就 是 表格 的 高 度 。 其 语法 结构 如 下 : 

<table height=" 表 格 高 度 "> <!-- 表 格 开始 --> 

<tr> <!-- 表 格 行 开 始 --> 

<td height=" 列 高 度 "></td> <!-- 表 格 列 --> 

</tr> <!-- 表 格 行 结束 --> 
</table> <!-- 表 格 结束 --> 
【示例 6.4】 下 面 是 使 用 height 属性 来 设置 表格 和 列 高 度 的 效果 ， 代 码 如 下 : 
<table height="400px" border="1"> <!-- 表 格 开始 ， 设 置 表格 整体 宽度 --> 

<tr > <!-- 表 格 行 开始 --> 


<td height="100px"> 列 高 度 为 100px</td> ”<!-- 设 置 列 高 度 --> 
<tqd height="100px"> 列 高 度 为 100</td> 
</tr> <!-- 表 格 行 结束 --> 
<tr> <1!-- 表 格 行 开 始 --> 
<tqd height="30px"> 列 高 度 为 30px</td> 
<td height="30px"> 列 高 度 为 30px</td> <!-- 设 置 列 高 度 --> 
</tr> <!-- 表 格 行 结束 --> 
</table> <!-- 表 格 结束 --> 
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效果 如 图 6.4 所 示 。 
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列 高 度 为 100px| 列 高 度 为 100 


列 高 度 为 30px | 列 高 度 为 30px 


图 6.4 使 用 height 属性 来 设置 表格 高 度 效果 图 


6.3.3 设置 背景 图 片 background 


在 上 一 章 已 经 讲 过 在 页 面 上 设置 背景 图 片 background 属性 的 用 法 。 当 把 background 
属性 放 在 <table> 标 签 里 的 时 候 ， 就 可 以 用 来 设置 表格 的 背景 图 ， 放 在 <tr> 标 签 里 的 时 候 ， 
就 可 以 用 来 设置 行 的 背景 图 ， 放 在 <td> 标 签 里 的 时 候 ， 就 可 以 用 来 设置 列 的 背景 图 。 其 语 
法 结构 如 下 : 

<table background=" 背 景 图 路 径 "> <!-- 表 格 开始 ， 并 设置 表格 背景 色 --> 


<tr> <!-- 表 格 行 开始 --> 
<td> 表 格 内容 </td> <!-- 表 格 列 开 始 和 结束 --> 
</tr> <!-- 表 格 行 结束 --> 
</table> <!-- 表 格 结束 --> 


同样 的 ， 可 以 按照 这 种 方法 ， 把 background 属性 写 在 <tr> 标 签 和 <td> 标 签 里 面 。 值 得 
注意 的 是 ， 当 background 属性 写 在 <tr> 标 签 里 的 时 候 ， 图 片 不 会 一 直 延 续 到 每 个 列 ， 而 是 
每 个 列 的 背景 图 都 会 重新 再 读 取 显 示 。 这 种 显示 效果 在 谷歌 浏览 器 里 可 以 很 清晰 地 看 出 来 ， 
但 是 在 下 里 ， 却 看 不 到 行 的 背景 图 。 这 也 是 background 属性 的 兼容 性 不 够 的 问题 。 下 面 
将 给 出 两 个 浏览 器 的 效果 图 来 进行 比较 。 

【示例 6.5】 下 面 是 使 用 background 属性 来 实现 表格 背景 图 的 效果 ,为 了 让 行 和 列 有 所 
比较 ， 这 里 会 使 用 一 个 2 行 2 列 的 表格 ， 在 表格 里 行 和 列 都 分 别 插入 不 同 的 图 片 ， 图 片 会 
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继续 使 用 第 5 章 的 图 ， 它 们 放 在 images 的 文件 夹 里 。 代 码 如 下 : 


<table width="600" border="1"> <!-- 表 格 开始 ， 设 置 表格 宽 和 背景 图 片 --> 
<tr> <! 一 -表格 行 开始 --> 
<td width="100" height="80" background="images/5.2.jpg"></td> 


<! 一 设置 列 宽度 、 高 度 和 插入 背景 图 片 --> 


<td width="200">gnbsp;</td> <! 一 -设置 列 宽度 --> 
</tr> <!-- 表 格 行 结束 --> 
<tr background="images/5.4.jpg">&nbsp; <!-- 表 格 行 开始 ， 设 置 行 的 背景 图 片 --> 
<td height="100"></td> <! 一 -设置 列 宽度 --> 
<td>gnbsp;</td> 
</tr> <!-- 表 格 行 结束 --> 
<tr> 
<td width="100" height="100"> 
</td> 
</tr> 
</table> <!-- 表 格 结束 --> 
效果 如 图 6.5、 图 6.6 所 示 。 
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图 6.5 使 用 background 属性 来 实现 表格 背景 图 效果 图 ( 正 浏览 器 ) 
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图 6.6 使 用 background 属性 来 实现 表格 背景 图 效果 图 (谷歌 浏览 器 ) 
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6.3.4 表格 间距 cellspacing 


表格 间距 是 指 表格 中 列 与 列 之 间 的 距离 , 通过 cellspacing 属性 来 进行 设置 , cellspacing 
属性 只 能 在 <toble> 标 签 里 面 定义 。 使 用 cellspacing 属性 来 设置 间距 以 后 ， 可 以 使 表格 的 内 
容 看 起 来 不 会 太 过 于 紧凑 ， 使 网 页 内 容 更 加 的 清晰 、 整 洁 。 其 语法 结构 如 下 : 

<table cel1spacing=" 间 距 的 大 小 "> <!-- 表 格 开始 --> 


EE <!-- 表 格 行 开始 --> 
<td></td> <!-- 表 格 列 --> 
<NEE> <!-- 表 格 行 结束 --> 
</table> <!-- 表 格 结束 --> 


【示例 6.6】 下 面 是 使 用 cellspacing 属性 来 实现 表格 间距 的 效果 ， 这 里 用 了 一 个 2 行 2 
列 的 表格 ,代码 如 下 : 
<table width="400px" cellspacing="10px" > 
<!-- 表 格 开始 , 设置 表格 整体 宽度 和 间距 --> 
<tr> <!-- 表 格 行 开始 --> 
<td width="200px"> 表 格 中 的 间距 为 10px</td> <!-- 设 置 列 宽度 --> 
<td width="200px"> 表 格 中 的 间距 为 10px</td> <!-- 设 置 列 宽度 --> 
</tr> <!-- 表 格 行 结束 --> 
<tr> <!-- 表 格 行 开 始 --> 
<td> 表 格 中 的 间距 为 10px</td> 
<td> 表 格 中 的 间距 为 10px</td> 


</tr> <!- -表格 行 结束 -> 
</table> <!-- 表 格 结束 --> 
效果 如 图 6.7 所 示 。 
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表格 中 的 间距 为 10px 表格 中 的 间距 为 10px 
表格 中 的 间距 为 10px 表格 中 的 间距 为 10px 


图 6.7 使 用 cellspacing 属性 来 实现 表格 的 间距 


图 6.7 中 , 在 框框 里 面 的 就 是 一 个 表格 , 表格 里 空 出 了 10px 的 间距 再 显示 行 和 列 的 边框 。 


全 技巧 : 一 般 在 制作 网 站 时 ， 想 要 切 出 来 的 图 在 网 页 中 显示 不 会 变形 ， 然 后 可 以 很 好 地 对 
齐 ， 在 表格 <table> 标 签 里 要 加 一 个 属性 cellspacing="0"。 


6.3.5 设置 单元 格 内 的 距离 cellpadding 


单元 格 内 的 距离 是 指 单元 格 内 容 与 单元 格 边界 之 间 的 距离 。<table> 标 签 中 的 
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cellpadding 属性 就 是 用 来 设置 单元 格 内 的 距离 , cellpadding 属性 只 能 在 <table> 标 签 中 定义 ， 
用 于 对 整个 表格 单元 格 内 的 距离 进行 控制 。 其 语法 结构 如 下 : 


<table cellpadding=" 距 离 大 小 ”> <! 一 -表格 开始 -一 > 
RE <!-- 表 格 行 开始 --> 
<td> 表 格 内 容 </td> <!-- 表 格 列 --> 
</Er> <! 一 -表格 行 结束 -> 
</table> <!-- 表 格 结束 --> 


【示例 6.7】 下 面 是 使 用 cellpadding 属性 来 实现 单元 格 内 容 与 边界 的 距离 的 效果 。 这 里 
创建 了 两 个 1 行 2 列 的 表格 来 进行 比较 ， 代 码 如 下 : 
<table width="350px" cellpadding="6px" border="1"> 
<!-- 表 格 开始 ， 设 置 表格 整体 宽度 ， 内 容 与 边界 的 距离 为 6px--> 


SEr> <!-- 表 格 行 开始 --> 
<td> 单 元 格 内 的 距离 </td> <!-- 表 格 列 --> 
<td> 单 元 格 内 的 距离 </td> <!-- 表 格 列 --> 

EE <!-- 表 格 行 结 束 --> 

</table><br/><br/> <!-- 表 格 结束 --> 


<table width="350px" cellpadding="20px" border="1"> 
<!-- 表 格 开始 , 设置 表格 整体 宽度 , 内 容 与 边界 的 距离 为 20px--> 


<tr> <!-- 表 格 行 开始 --> 
<td> 单 元 格 内 的 距离 </td> <!-- 表 格 列 --> 
<td> 单 元 格 内 的 距离 </td> <!-- 表 格 列 --> 
</tr> <!-- 表 格 行 结 束 --> 
</table> 


效果 如 图 6.8 所 示 ， 可 以 看 出 ，cellpadding 属性 值 越 大 ， 单 元 格 内 容 与 单元 格 边界 之 
间 的 距离 就 越 大 。 
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单元 格 内 的 距离 单元 格 内 的 距离 


单元 格 内 的 
距离 为 6px 


单元 格 内 的 
距离 为 20px 


单元 格 内 的 距离 单元 格 内 的 距离 


图 6.8 使 用 cellpadding 属性 来 实现 单元 格 内 容 与 边界 距离 效果 图 


6.4 表格 边框 


在 前 面 的 小 节 中 我 们 都 用 到 了 边框 。 边框 是 表格 中 很 重要 的 一 个 部 分 , 不 使 用 它 的 话 ， 
表格 看 起 来 会 很 杂乱 。 因 此 使 用 它 不 仅 可 以 排版 网 站 ， 还 可 以 美化 网 站 。 本 节 就 来 讲解 边 
框 的 各 种 用 法 。 
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6.4.1 边框 宽度 border 


设置 边框 首先 要 设置 它 的 宽度 。<table> 标 签 中 的 border 属性 就 是 用 来 控制 表格 边框 的 


宽度 的 。 其 语法 结构 如 下 : 
<table border=" 表 格 边 框 宽度 ”> 


<tr> 
<td> 表 格 内 容 </td> 
</tr> 
</table> 


< = 农 入 于 如 > 
<!-- 表 格 行 开始 --> 
<!-- 表 格 列 --> 
<!-- 表 格 行 结 束 --> 
<!-- 表 格 结束 --> 


需要 注意 的 是 ， 这 里 的 边框 会 默认 为 黑色 ， 而 不 是 透明 色 。 
【示例 6.8】 下 面 是 使 用 border 属性 为 表格 实现 边框 宽度 的 效果 ， 这 里 使 用 了 两 个 不 同 


宽度 边框 的 表格 进行 比较 ， 代 码 如 下 : 


<table width="300px" border="1lpx" > 


<tr> 
<td> 表 格 边框 为 1px</td> 
<td> 表 格 边框 为 1px</tqd> 
</tr> 
</table><br/><br/> 


<table width="300px" border="5px" > 


<Etr> 
<td> 表 格 边 框 为 5px</td> 
<td> 表 格 边框 为 5px</td> 
</tr> 
</table> 


效果 如 图 6.9 所 示 。 
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<!-- 表 格 开始 ， 设 置 表格 边框 --> 


<!-- 表 格 行 开始 --> 
<!-- 表 格 列 --> 
<!-- 表 格 列 --> 
<!-- 表 格 行 结 束 --> 
<!- -表格 结束 --> 
<!-- 表 格 开始 ， 设 置 表格 边框 --> 
<!-- 表 格 行 开始 --> 
<!-- 表 格 列 --> 

<!-- 表 格 列 --> 

<!-- 表 格 行 结 束 --> 
<!-- 表 格 结束 -=-> 


表格 边框 为 1px 


表格 边框 为 1px 


表格 边框 为 5px 


表格 边框 为 5px 


图 6.9 使 用 border 属性 为 表格 实现 边框 宽度 效果 图 


可 以 看 到 ， 在 浏览 器 里 ， 边 框 自动 产生 了 一 个 立体 效果 的 背景 ， 对 于 背景 的 使 用 将 在 


下 面 讲解 。 


全 技巧 : 一 般 在 制作 网 站 时 ， 想 要 切 出 来 的 图 在 网 页 中 显示 不 会 变形 ， 然 后 可 以 很 好 地 对 
齐 , 在 表格 <table> 标 签 里 不 止 要 加 一 个 属性 cellspacing="0", 还 要 加 上 border=-"0"。 
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6.4.2 边框 颜色 bordercolor 


边框 颜色 就 是 在 设置 边框 时 边框 所 产生 的 颜色 。 在 上 一 小 节 可 以 看 出 ， 边 框 的 默认 颜 
色 为 黑色 ， 我 们 可 以 通过 bordercolor 属性 来 设置 边框 的 颜色 。bordercolor 属性 写 在 <table> 
标签 里 面 , bordercolor 属性 是 要 在 border 属性 的 存在 下 才 可 以 产生 效果 。 其 语法 结构 如 下 : 


<table border=" 边 框 宽度 ”bordercolor=" 边 框 颜色 "> <!-- 表 格 开始 --> 


<tr> <!-- 表 格 行 开始 --> 
<td> 表 格 内 容 </td> <!-- 表 格 列 --> 
< WE <!-- 表 格 行 结束 --> 
</table> <!-- 表 格 结束 --> 


其 中 ，bordercolor=" 边 框 颜 色 "， 填 写 颜 色 的 方法 和 填写 背景 颜色 的 方法 是 一 样 的 。 这 
里 填写 的 颜色 将 代替 上 一 小 节 设 置 宽度 时 所 产生 的 立体 背景 。 
【示例 6.9】 下 面 是 使 用 bordercolor 属性 来 实现 表格 边框 颜色 的 效果 ， 代 码 如 下 : 
<table width="300" border="5px" bordercolor="#00ffff" > 
<!-- 表 格 开始 ， 设 置 边 框 宽度 为 5px 和 边框 颜色 为 蓝 色 --> 


<tr> <!-- 表 格 行 开始 --> 
<td> 边 框 颜色 为 蓝 色 </td> <!-- 表 格 列 --> 
<td> 边 框 颜色 为 蓝 色 </td> 
/> <!-- 表 格 行 结束 --> 
</table> <!-- 表 格 结束 --> 
效果 如 图 6.10 所 示 。 


SC Ofile//F/bj 


边框 颜色 为 蓝 色 ”边框 颜色 为 蓝 色 


图 6.10 ”使 用 bordercolor 属性 实现 表格 边框 颜色 效果 图 


6.4.3” 亮 边框 颜色 bordercolorlight 


亮 边框 颜色 是 指 左 边框 和 上 边框 的 颜色 ， 可 以 通过 bordercolorlight 属性 来 进行 设置 。 
需要 注意 的 是 使 用 bordercolorlight 属性 就 不 能 使 用 bordercolor 属性 ， 因 为 这 是 一 个 重复 性 
的 动作 ， 就 算 使 用 也 无 法 产生 效果 。 其 语法 结构 如 下 : 

<table border=" 边 框 宽度 "” bordercolorlight= 左 上 边框 颜色 "" > <!-- 表 格 开始 --> 


E> <!-- 表 格 行 开始 --> 
<td> 表 格 内 容 </td> <!-- 表 格 列 --> 
</tr> <!-- 表 格 行 结束 --> 


yy 
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</table> <!-- 表 格 结束 --> 


其 中 ，bordercolorlight="" 是 用 来 填写 左边 框 和 上 边框 的 颜色 的 ， 填 写 颜色 的 方法 和 填 
写 背 景 闫 色 的 方法 是 一 样 的 。 由 于 这 里 填写 的 颜色 只 有 左边 框 和 上 边框 ， 所 以 右边 框 和 下 
边框 的 颜色 会 变 成 默认 的 颜色 。 
【示例 6.10】 下 面 是 使 用 bordercolorlight 属性 来 实现 设置 表格 亮 边框 颜色 的 效果 ， 代 
码 如 下 : 


<table width="300" border="10px" bordercolorlight="#00ffff" > 
<! 一 -表格 开始 ， 设 置 边框 宽度 为 10px， 亮 边框 颜色 为 蓝 色 --> 


Er <!-- 表 格 行 开 始 --> 
<td> 亮 边框 颜色 </td> <!-- 表 格 列 --> 
<td> 亮 边框 颜色 </td> <!-- 表 格 列 --> 

</Er> <!-- 表 格 行 结束 --> 

<tr> <!-- 表 格 行 开始 --> 
<td> 亮 边框 颜色 </td> <!-- 表 格 列 --> 
<td> 亮 边框 颜色 </td> <!-- 表 格 列 --> 
</tr> <!-- 表 格 行 结束 --> 
</table> <!-- 表 格 结束 --> 
效果 如 图 6.11 所 示 。 


图 6.11 使 用 bordercolorlight 属性 实现 表格 亮 边框 颜色 效果 图 


6.4.4 上 暗 边 框 颜色 bordercolordark 


暗 边 框 和 亮 边框 刚好 相反 ， 它 是 指 右边 框 和 下 边框 。 因 此 暗 边框 颜色 就 是 指 右边 框 和 
下 边框 的 颜色 ， 可 以 通过 bordercolordark 属性 来 进行 设置 。 同样 的 ， 使 用 bordercolordark 
属性 就 不 能 使 用 bordercolor 属性 。 其 语法 结构 如 下 : 


<table border=" 边 框 宽度 "bordercolordark=" 瞳 边框 颜色 "> ”<!-- 表 格 开始 --> 


<tr> <!-- 表 格 行 开 始 --> 
<td> 表 格 内 容 </td> <!-- 表 格 列 --> 
/Er <!-- 表 格 行 结束 --> 
</table> <!-- 表 格 结束 --> 


其 中 ， 填 写 颜色 的 方法 和 填写 背景 颜色 的 方法 是 一 样 的 。 由 于 这 里 填写 的 颜色 就 只 有 
边框 和 下 边框 ， 所 以 左边 框 和 上 边框 的 颜色 会 变 成 默认 的 颜色 。 
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【示例 6.11】 下 面 是 使 用 bordercolordark 属性 来 实现 表格 暗 边框 颜色 的 效果 ， 代 码 


如 下 : 


<table width="300px" border="10px" bordercolordark="#00ffff" > 
<!-- 表 格 开始 ， 设 置 边 框 宽度 为 10px， 亮 边框 颜色 为 蓝 色 --> 


<tr> <!-- 表 格 行 开始 --> 
<td> 暗 边框 颜色 </td> <!-- 表 格 列 --> 
<td> 暗 边框 颜色 </td> <!-- 表 格 列 --> 
/E> <!-- 表 格 行 结束 --> 
Sr <!-- 表 格 行 开始 --> 
<td> 暗 边框 颜色 </td> <!-- 表 格 列 --> 
<td> 暗 边框 颜色 </td> <!-- 表 格 列 --> 
</tr> <!-- 表 格 行 结束 --> 
</table> <!-- 表 格 结束 --> 
效果 如 图 6.12 所 示 。 


EEIGIasw axlem 
文件 (F) 。 编 强 (FE) 查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 

暗 边 框 颜色 岩 边 性 颜色 | 
EE | 
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| 臣 100% ~ 
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图 6.12 使 用 bordercolordark 属性 实现 表格 暗 边框 颜色 效果 图 


外 技巧 : 通过 对 不 同 边框 的 设置 ， 可 以 让 边框 看 起 来 更 有 立体 感 。 


6.4.5 不 显示 外 边框 void 


有 时 候 ， 我 们 不 希望 表格 显示 外 边框 ， 只 显示 内 边框 ， 这 时 可 以 通过 void 属性 值 来 设 
置 不 显示 表格 的 整个 外 边框 。 需 要 注意 的 是 ，void 属性 值 要 通过 frame 属性 来 进行 设置 。 
其 语法 结构 如 下 : 


<table border=" 边 框 宽度 " frame="void" > <!-- 表 格 开始 --> 
<tr> <!-- 表 格 行 开始 --> 
<td> 表 格 内 容 </td> <!-- 表 格 列 --> 
</tr> <!-- 表 格 行 结束 --> 
</table> <!-- 表 格 结束 --> 


其 中 ，frame="void" 这 是 固定 格式 ， 说 明了 不 显示 整个 外 边框 。 

【示例 6.12】 下 面 是 使 用 frame="void" 属 性 值 来 设置 不 显示 表格 外 边框 的 效果 。 这 里 创 
建 了 两 个 边框 宽度 都 为 5px 的 表格 来 进行 比较 ， 其 中 一 个 表格 不 显示 外 边框 ， 一 个 显示 外 
边框 ， 代 码 如 下 : 
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<table width="300px" border="5px" frame="void" > 


<! 一 表格 开始 , 设置 边框 粗细 , 不 显示 表格 整个 边框 --> 


<tr> <!-- 表 格 行 开 始 --> 
<td> 不 显示 外 边框 </td> <! 一 -表格 列 --> 
<td> 不 显示 外 边框 </td> <!-- 表 格 列 --> 
En <!-- 表 格 行 结 束 --> 
<tr> <!-- 表 格 行 开 始 --> 
<td> 不 显示 外 边框 </td> <!-- 表 格 列 --> 
<td> 不 显示 外 边框 </td> <!-- 表 格 列 --> 
</tr> <!-- 表 格 行 结束 --> 
</table><br/><br/> <!-- 表 格 结束 --> 


<table width="300px" border="5px"> 
<! 一 表格 开始 ， 设 置 边框 粗细 ， 显 示 表格 整个 边框 --> 


KE <!-- 表 格 行 开 始 --> 
<td> 显 示 外 边框 </td> <!-- 表 格 列 --> 
<td> 显 示 外 边框 </td> <!-- 表 格 列 --> 

区 <!-- 表 格 行 结束 --> 

<tr> <!-- 表 格 行 开始 --> 
<td> 显 示 外 边框 </td> <!-- 表 格 列 --> 
<td> 显 示 外 边框 </td> <!-- 表 格 列 --> 

</tr> <!-- 表 格 行 结束 --> 
</table> <!-- 表 格 结束 --> 
效果 如 图 6.13 所 示 。 
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图 6.13 使 用 frame= "void" 属 性 值 设置 不 显示 表格 外 边框 效果 图 


全 注意 : void 属性 值 只 是 设置 不 显示 外 边框 ， 内 边框 照样 显示 。 


6.4.6 显示 上 下 边框 hsides 


想 要 只 显示 表格 的 上 下 边框 ， 可 以 使 用 hsides 属性 值 来 设置 。hsides 属性 值 同样 要 通 
过 frame 属性 来 进行 设置 。 其 语法 结构 如 下 : 


<table border=" 边 框 宽度 "frame= "hsides"” > <!-- 表 格 开始 --> 


E> <!-- 表 格 行 开始 --> 
<td> 表 格 内 容 </td> <!-- 表 格 列 --> 
</tr> <!-- 表 格 行 结束 --> 
</table> <!-- 表 格 结束 --> 
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其 中 ，frame="hsides" 这 是 固定 格式 ， 说 明了 显示 上 下 边框 。 

【示例 6.13】 下 面 是 使 用 frame="hsides" 属 性 值 来 设置 显示 表格 上 下 边框 的 效果 。 这 里 
创建 了 两 个 边框 宽度 都 为 8px 的 表格 来 进行 比较 ， 其 中 一 个 表格 只 显示 上 下 边框 ， 一 个 显 
示 整 个 边框 ， 代 码 如 下 : 

<table width="300" border="8px" frame="hsides" > 

<! 一 表格 开始 ， 设 置 边框 粗细 ， 显 示 表格 上 下 边框 --> 


<Er> <!-- 表 格 行 开 始 --> 
<td> 显 示 上 下 边框 </td> <!-- 表 格 列 --> 
<td> 显 示 上 下 边框 </td> <!-- 表 格 列 --> 
攻 <!-- 表 格 行 结束 --> 
<Er> <!-- 表 格 行 开 始 --> 
<td> 显 示 上 下 边框 </td> <!-- 表 格 列 --> 
<td> 显 示 上 下 边框 </td> <!-- 表 格 列 --> 
</tr> <!-- 表 格 行 结束 --> 
</table><br/><br/> <!-- 表 格 结束 --> 
<table width="300" border="8px"><!-- 表 格 开始 ， 设 置 边框 粗细 ， 显 示 表 格 整 个 边框 --> 
<tr> <!-- 表 格 行 开始 --> 
<td> 显 示 整 个 边框 </td> <!-- 表 格 列 --> 
<td> 显 示 整 个 边框 </td> <!-- 表 格 列 --> 
</tr> <!-- 表 格 行 结束 --> 
<tr> <!-- 表 格 行 开始 --> 
<td> 显 示 整 个 边框 </td> <!-- 表 格 列 --> 
<td> 显 示 整 个 边框 </td> <!-- 表 格 列 --> 
</tr> <!-- 表 格 行 结束 --> 
</table> <!-- 表 格 结束 --> 
效果 如 图 6.14 所 示 。 
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图 6.14 使 用 frame="hsides" 属 性 值 设置 显 示 表格 上 下 边框 效果 图 


6.4.7 显示 左右 边框 


上 一 小 节 中 设置 表格 只 显示 上 下 边框 ， 同 样 的， 六 


vsides 


还 可 以 设置 表格 只 


vsides 属性 值 就 可 以 用 来 显示 表格 的 左右 边框 。 vsides 属性 值 也 是 通过 frame .属性 来 进行 设 


置 。 其 语法 结构 如 下 : 
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<table border=" 边 框 宽度 ”frame="vsides" > <!-- 表 格 开始 --> 


<tr> <!-- 表 格 行 开 始 --> 
<td> 表 格 内 容 </td> <!-- 表 格 列 --> 
</tr> <!-- 表 格 行 结束 --> 
</table> <!-- 表 格 结束 --> 


其 中 frame="vsides" 这 是 固定 格式 ， 说 明了 显示 左右 边框 。 
【示例 6.14】 下 面 是 使 用 frame="vsides" 属 性 值 来 设置 显示 表格 左右 边框 的 效果 。 这 里 
创建 了 两 个 边框 宽度 都 为 8px 的 表格 来 进行 比较 ， 其 中 一 个 表格 只 显示 左右 边框 ， 一 个 显 
示 整 个 边框 ， 代 码 如 下 : 


<table width="300" border="8px" frame="vsides'" > 
<!-- 表 格 开始 ， 设 置 边框 粗细 ， 显 示 表 格 左 右边 框 --> 


<Er> <!-- 表 格 行 开 始 --> 
<td> 显 示 左 右边 框 </td> <!-- 表 格 列 --> 
<td> 显 示 左 右边 框 </td> <!-- 表 格 列 --> 
</tr> <!-- 表 格 行 结束 --> 
<tr> <!-- 表 格 行 开始 --> 
<td> 显 示 左 右边 框 </td> <!-- 表 格 列 --> 
<td> 显 示 左 右边 框 </td> <!-- 表 格 列 --> 
</tr> <!-- 表 格 行 结束 --> 
</table><br/><br/> <!-- 表 格 结束 --> 
<table width="300" border="8px"><!-- 表 格 开 始 ， 设 置 边框 粗细 ， 显 示 表 格 整 个 边框 --> 
<tr> <!-- 表 格 行 开 始 --> 
<td> 显 示 整 个 边框 </td> <!-- 表 格 列 --> 
<td> 显 示 整 个 边框 </td> <!-- 表 格 列 --> 
</tr> <!-- 表 格 行 结束 --> 
<tr> <!-- 表 格 行 开 始 --> 
<td> 显 示 整 个 边框 </td> <!-- 表 格 列 --> 
<td> 显 示 整 个 边框 </td> <!-- 表 格 列 --> 
</tr> <!-- 表 格 行 结束 --> 
</table> <!-- 表 格 结束 --> 
效果 如 图 6.15 所 示 。 
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图 6.15 使 


外 说 明 : vsides 属性 值 所 说 


志 汪 有 二 


frame="vsides" 属 性 值 设置 显示 表格 左右 边框 效果 图 


的 左右 边框 是 指 外 边框 的 左右 边框 。 
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6.4.8 单独 显示 表格 上 、 下 、 左 、 右 边框 


在 表格 的 边框 设置 中 ， 也 可 以 只 显示 表格 的 上 边框 、 下 边框 、 左 边框 或 者 右边 框 。 其 
中 above 属性 值 用 来 显示 表格 的 上 边框 ，below 属性 值 用 来 显示 表格 的 下 边框 ，lhs 属性 值 
用 来 显示 表格 的 左边 框 ，rhs 属性 值 用 来 显示 表格 的 右边 框 。 这 四 个 属性 值 都 要 通过 frame 
属性 来 进行 设置 。 其 语法 结构 如 下 : 

<table border=" 边 框 宽度 ”frame= "above" > ”<! 一 设置 表格 只 显示 上 边框 --> 

<table border=" 边 框 宽 度 "” frame= "below" > ”<! 一 设置 表格 只 显示 下 边框 --> 

<table border=" 边 框 宽度 " frame= "lhs" > <! 一 设置 表格 只 显示 左边 框 -=-> 

<table border=" 边 框 宽度 " frame= "rhs" > <! 一 设置 表格 只 显示 右边 框 -=-> 

下 面 来 分 别 举例 说 明 这 四 个 属性 值 的 用 法 。 

【示例 6.15】 下 面 是 使 用 frame="above" 属 性 值 来 设置 只 显示 表格 上 边框 的 效果 。 为 了 
让 效果 更 明显 ， 这 里 把 表格 边框 颜色 设置 为 红色 ， 代 码 如 下 : 

<table width="300px" border="5px" bordercolor="#ff0000" frame="above" > 

<!-- 表 格 开始 ， 设 置 边框 宽度 为 5px， 边 框 颜色 为 红色 ， 设 置 只 显示 表格 上 边框 --> 


<tr> <!-- 表 格 行 开始 --> 
<tqd> 显 示 表格 上 边框 </td> <!-- 表 格 列 --> 
<tqd> 显 示 表 格 上 边框 </td> <!-- 表 格 列 --> 
</tr> <!-- 表 格 行 结束 --> 
<tr> <!-- 表 格 行 开 始 --> 
<td> 显 示 表 格 上 边框 </td> <!-- 表 格 列 -=-> 
<td> 显 示 表 格 上 边框 </td> <!-- 表 格 列 --> 
</tr> <!-- 表 格 行 结束 --> 
</table> <!-- 表 格 结束 --> 
效果 如 图 6.16 所 示 。 
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图 6.16 使 用 frame="above" 属 性 值 设 置 只 显示 表格 上 边框 效果 图 
【示例 6.16】 下 面 是 使 用 frame="below" 属 性 值 来 设置 只 显示 表格 下 边框 的 效果 。 为 了 
让 效果 更 明显 ， 这 里 把 表格 边框 颜色 设置 为 红色 ， 代 码 如 下 : 


<table width="300px"” border="5px" bordercolor="#ff0000" frame="below" > 
<!-- 表 格 开始 ， 设 置 边 框 宽度 为 5px， 边 框 颜色 为 红色 ， 设 置 只 显示 表格 下 边框 --> 


EE <!-- 表 格 行 开始 --> 
<td> 显 示 表 格 下 边框 </td> <!-- 表 格 列 --> 
<td> 显 示 表 格 下 边框 </td> <!- -表格 列 --> 


。83 。 


第 1 篇 HIML 网 站 开发 


</tr> <!-- 表 格 行 结束 --> 
> <!-- 表 格 行 开始 --> 
<td> 显 示 表格 下 边框 </td> <!-- 表 格 列 --> 
<td> 显 示 表 格 下 边框 </td> <!-- 表 格 列 --> 
ES <!-- 表 格 行 结束 --> 
</table> <!-- 表 格 结束 --> 
效果 如 图 6.17 所 示 。 


图 6.17 使 用 frame="below" 属 性 值 设置 只 显示 表格 下 边框 效果 图 


【示例 6.17】 下 面 是 使 用 frame="lhs" 属 性 值 来 设置 
效果 更 明显 ， 这 里 把 表格 边框 颜色 设置 为 红色 ， 代 码 如 下 : 


: 示 表 格 左 边框 的 效果 。 为 了 让 


<table width="300px" border="5px" bordercolor="#ff0000" frame="lhs"> 
<! 一 -表格 开始 ， 设 置 边框 宽度 为 5px， 边 框 颜色 为 红色 ， 设 置 只 显示 表格 左边 框 --> 


<tr> <!-- 表 格 行 开始 --> 
<td> 显 示 表 格 左边 框 </td> <!-- 表 格 列 --> 
<td> 显 示 表 格 左边 框 </td> <!-- 表 格 列 --> 
</Er> <!-- 表 格 行 结束 --> 
<ER> <!-- 表 格 行 开 始 --> 
<td> 显 示 表格 左边 框 </td> <!-- 表 格 列 --> 
<tqd> 显 示 表 格 左边 框 </td> <!-- 表 格 列 --> 
EE <!-- 表 格 行 结束 --> 
</table> <!-- 表 格 结束 --> 
效果 如 图 6.18 所 示 。 


图 6.18 ”使 用 frame="lhs" 属 性 值 设置 只 显示 表格 左边 框 效果 图 


【示例 6.18】 下 面 是 使 用 frame="rhs" 属 性 值 来 设置 只 显示 表格 右边 框 的 效果 。 为 了 让 
效果 更 明显 ， 这 里 把 表格 边框 颜色 设置 为 红色 ， 代 码 如 下 : 
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<table width="300px" border="5px" bordercolor="#ff0000" frame="rhs" > 
<!-- 表 格 开始 ， 设 置 边 框 宽度 为 5px， 边 框 颜色 为 红色 ， 设 置 只 显示 表格 右边 框 --> 


<tr> <!-- 表 格 行 开 始 --> 
<tqd> 显 示 表格 右边 框 </td> <!-- 表 格 列 --> 
<td> 显 示 表 格 右边 框 </td> <!-- 表 格 列 --> 
ES <!-- 表 格 行 结 束 --> 
SE <!-- 表 格 行 开始 --> 
<tqd> 显 示 表 格 右 边框 </td> <!-- 表 格 列 --> 
<tqd> 显 示 表 格 右 边框 </td> <!-- 表 格 列 --> 
Er <!-- 表 格 行 结束 --> 
</table> <!-- 表 格 结束 --> 
效果 如 图 6.19 所 示 。 


I Erm 


文件 站 ”名 颖 (E) 坦 看 收 共 (A】 工具 大 二 H) 
区 示 表 格 石 边框 | 鲍 示 表 格 石 边 杠 | 


区 于 表格 石 过 框 | 电 示 表格 丰 运 检 


图 6.19 使 用 frame="rhs" 属 性 值 设置 具 显示 表格 右边 框 效果 图 


全 技巧 :在 网 站 使 用 上 ， 很 少 用 到 上 面 这 4 种 边框 的 属性 设置 ， 一 般 都 只 会 用 到 border 
属性 。 


6.5 设置 对 齐 方式 


表格 都 是 由 行 组 成 的 ， 行 也 可 以 设置 对 齐 方式 。 通 过 对 行 的 对 齐 方式 的 设 定 ， 可 以 使 
表格 更 加 整齐 。 行 的 对 齐 方 式 包括 水 平 对 齐 方式 和 垂直 对 齐 方 式 。 本 节 来 详细 介绍 这 两 种 
对 齐 方式 。 


6.5.1 水 平 对 齐 方式 align 

align 属性 可 以 设置 行 的 水 平 对 齐 ， 就 是 使 行 里 面 的 内 容 都 水 平 对 齐 ， 其 中 默认 为 水 平 
居 左 对 齐 。align 属性 共有 三 个 值 ， 分 别 是 : 居中 对 齐 、 居 右 对 齐 、 居 左 对 齐 。 

1. 居中 对 齐 


居中 对 齐 可 以 通过 align="center" 来 进行 设置 。 此 属性 值 放 在 <tr> 标 签 里 面 ， 用 来 设置 
行 的 对 齐 方式 。 除 了 可 以 写 在 <te> 标 签 里 面 ， 还 可 以 写 在 <table> 标 签 和 <td> 标 签 里 面 。 写 
在 <table> 标 签 里 面 ， 用 来 控制 整个 表格 的 水 平 居中 对 齐 ， 写 在 <td> 标 签 里 面 ， 用 来 控制 每 
个 列 里 面 的 内 容 水 平 居中 对 齐 。 用 法 和 写 在 <tr> 标 签 里 面 一 样 。 其 语法 形式 如 下 : 
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<table> <!-- 表 格 开始 --> 
<tr align="center"> <! 一 -表格 行 开始 -> 
<td> 表 格 内 容 </td> <!-- 表 格 列 --> 
</tr> <!-- 表 格 行 结束 --> 
</table> <!-- 表 格 结束 --> 


【示例 6.19】 下 面 是 使 用 align="center" 属 性 值 来 设置 显示 行内 容 的 水 平 居中 对 齐 的 效 
果 。 为 了 效果 更 明显 ， 创 建 一 个 2 行 3 列 的 表格 。 其 中 第 一 行 居中 对 齐 ， 第 二 行 没有 设置 
居中 对 齐 。 代 码 如 下 : 
<table width="450px" border="1lpx" > 
<!-- 表 格 开始 ， 设 置 表格 边框 为 1px， 表 格 宽度 为 450px--> 
<tr align="center"> <!-- 表 格 行 开 始 ， 设 置 行内 容 的 水 平 居中 对 齐 --> 
<td > 水 平 居中 </td> <!-- 表 格 列 --> 
<td > 水 平 居中 </td> 
<td > 水 平 居中 </td> 


</tr> <!-- 表 格 行 结束 --> 
<tr > <!-- 表 格 行 开始 ， 未 设置 行内 容 的 水 平 居 中 对 齐 --> 
<td > 水 平 居中 </td> <!-- 表 格 列 --> 


<td > 水 平 居中 </td> 
<td > 水 平 居 中 </td> 


</tr> <!-- 表 格 行 结束 --> 
</table> <!-- 表 格 结束 --> 
效果 如 图 6.20 所 示 。 


J 了 @m x 
S33C A Ofile/bj 

水 平 居 中 水 平 居中 水 平 居 中 
水 平 居中 水 平 居中 水 平 居中 


图 6.20 使 用 align="center" 来 设置 显示 行内 容 的 水 平 居中 效果 图 


2. 居 左 对 齐 

通过 align="left" 可 以 设置 行 里 面 的 内 容 都 居 左 对 齐 。 此 属性 值 除 了 可 以 写 在 <tr> 标 签 
里 面 ， 还 可 以 写 在 <table> 标 签 和 <td> 标 签 里 面 。 这 和 居中 的 属性 值 用 法 是 一 样 的 。 其 语法 
结构 如 下 : 


<table> <! 一 表格 开始 -> 
<tr align="left "> <!-- 表 格 行 开 始 --> 
<td> 表 格 内 容 </td> <!-- 表 格 列 --> 
</tr> <!-- 表 格 行 结束 --> 
</table> <!-- 表 格 结束 --> 


【示例 6.20】 下 面 是 使 用 align="left" 属 性 值 来 设置 显示 行内 容 的 水 平 居 左 对 齐 的 效果 。 
为 了 效果 更 明显 ， 创 建 一 个 2 行 3 列 的 表格 。 其 中 第 一 行 居 左 对 齐 ， 第 二 行 设置 居中 对 齐 。 
代码 如 下 : 
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<table width="450px" border="1lpx" > 
<!-- 表 格 开始 ， 设 置 表格 边框 为 1px， 表 格 宽度 为 450px--> 
<tr align="left"> <!-- 表 格 行 开始 ， 设 置 行内 容 的 水 平 居 左 对 齐 --> 
<tq > 水 平 居 左 </td> <!-- 表 格 列 --> 
<td > 水 平 居 左 </td> 
<td > 水 平 居 左 </td> 


ET <!-- 表 格 行 结 束 --> 
<tr align="center"> <!-- 表 格 行 开始 ， 设 置 行内 容 的 水 平 居中 对 齐 --> 
<tq > 水 平 居中 </td> <! 一 表格 列 --> 


<td > 水 平 居中 </td> 
<td > 水 平 居中 </td> 


</tr> <!-- 表 格 行 结束 --> 
</table> <!-- 表 格 结束 --> 
效果 如 图 6.21 所 示 。 


SC Ofile//r/bj 


水 平 居 左 水 平 居 左 
水 平 居 中 水 平 居 中 


图 6.21 使 用 align="left" 来 设置 显示 行内 容 的 水 平 居 左 效果 图 


全 技巧 ， 由 于 默认 的 align 属性 是 水 平 居 左 ， 所 以 在 使 用 时 ， 如 果 不 是 个 别 需 要 ， 可 以 不 


写 此 属性 值 。 


3， 居 右 对 齐 
通过 align="right" 可 以 设置 行 里 面 的 内 容 都 居 右 对 齐 。 此 属性 值 和 居中 对 齐 的 属性 值 


一 样 ， 除 了 可 以 写 在 <tr> 标 签 里 面 ， 还 可 以 写 在 <table> 标 签 和 <td> 标 签 里 面 。 其 语法 结构 
如 下 : 


<table> <! 一 表格 开始 --> 
<Er align “FightE"> <!-- 表 格 行 开 始 --> 
<td> 表 格 内 容 </td> <!-- 表 格 列 --> 
</tr> <!-- 表 格 行 结束 --> 
</table> <!-- 表 格 结束 --> 


【示例 6.21】 下 面 是 使 用 align="right" 属 性 值 来 设置 显示 行内 容 的 水 平 居 右 对 齐 的 效果 。 


为 了 效果 更 明显 , 创建 一 个 2 行 3 列 的 表格 。 其 中 第 一 行 居 右 对 齐 , 第 二 行 设置 居中 对 齐 。 
代码 如 下 : 


<table width="450px" border="1lpx" > 
<!-- 表 格 开始 ， 设 置 表格 边框 为 1px， 表 格 整体 宽度 为 450px--> 
<tr align="right"> <!-- 表 格 行 开始 ， 设 置 行内 容 的 水 平 居 右 对 齐 --> 
<tq > 水 平 居 右 </td> SE > 
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<td > 水 平 居 右 </td> 
<td > 水 平 居 右 </td> 


</tr> <! 一 -表格 行 结束 -一 > 
<tr align="center"> <! 一 表格 行 开始 ， 设 置 行内 容 的 水 平 居 中 对 齐 --> 
<td > 水 平 居中 </td> <!-- 表 格 列 --> 


<td > 水 平 居中 </td> 
<td > 水 平 居 中 </td> 


</Er> <!-- 表 格 行 结束 --> 
</table> <!-- 表 格 结束 --> 
效果 如 图 6.22 所 示 。 


人 
CA Qfile//F/bj 


水 平 居 右 水 平 居 右 水 平 居 右 
| “水平 居中 水 平 居中 | ”水 平 居中 


图 6.22 ”使 用 align="right" 来 设置 显示 行内 容 的 水 平 居 右 效果 图 


2 垂直 对 齐 方 式 valign 


valign 属性 可 以 设置 行 的 垂直 对 齐 方式 ， 就 是 使 行 里 面 的 内 容 都 垂直 对 齐 ， 其 中 默认 


为 垂直 居中 对 齐 。valign 属性 也 有 三 个 值 ， 分 别 是 : 居中 对 齐 、 居 上 对 齐 、 居 下 对 齐 。 垂 
直 对 齐 的 设置 和 水 平 对 齐 的 设置 方法 是 一 样 的 ， 这 里 不 再 一 一 阐述 。 这 三 种 垂直 对 齐 方式 
语法 结构 如 下 : 


<tr valign="middle"> <!-- 表 格 行 开始 ， 设 置 垂 直 居 中 对 齐 --> 
<tr valign="top"> <! 一 设置 居 上 对 齐 --> 
<tr valign="bottom"> <! 一 设置 居 下 对 齐 --> 


其 中 , 这 三 个 属性 值 除了 可 以 写 在 <t> 标 签 里 面 , 还 可 以 写 在 <td> 标 签 里 面 。 写 在 <td> 


标签 里 面 ， 用 来 控制 每 个 列 里 面 的 内 容重 直 对 齐 方式 。 用 法 和 写 在 <tr> 标 签 里 面 一 样 。 下 
面 通过 例子 来 分 别 说 明 这 三 个 属性 值 的 用 法 。 


【示例 6.22】 下 面 是 使 用 valign="middle"、valign="top" 和 valign="bottom" 这 三 个 属性 


值 来 设置 显示 行内 容 的 三 种 垂直 对 齐 方式 的 效果 。 为 了 使 效果 更 明显 ， 创 建 了 3 行 3 列 的 
表格 。 其 中 ， 第 一 行 垂直 居 上 对 齐 ， 第 二 行 居中 对 齐 ， 第 三 行 居 下 对 齐 。 代 码 如 下 : 


<table border="1lpx" height="200px" width="300px"> 
<!-- 表 格 开始 ， 设 置 表 格 边框 为 1px， 表 格 整体 宽度 为 300px， 表 格 整 体高 度 为 200px--> 


<tr valign="top"> <!-- 表 格 行 开 始 ， 设 置 行内 容 的 垂直 居 上 对 齐 --> 
<td> 居 上 对 齐 </td> <!-- 表 格 列 --> 
<td> 居 上 对 齐 </td> 
<td> 居 上 对 齐 </td> 
</tr> <!-- 表 格 行 结束 --> 
<tr valign="middle"> <! 一 表格 行 开始 ， 设 置 行内 容 的 垂直 居中 对 齐 --> 
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<td> 垂 直 居 中 </td> <! 一 -表格 列 --> 
<td> 甜 直 居 中 </td> 
<td> 垂 直 居 中 </td> 
hi <!-- 表 格 行 结束 --> 
<tr valign="bottom"> <!-- 表 格 行 开 始 ， 设 置 行内 容 的 垂直 居 下 对 齐 --> 
<td> 居 下 对 齐 </td> <!-- 表 格 列 --> 
<td> 居 下 对 齐 </td> 
<td> 居 下 对 齐 </td> 
</tr> <! 一 -表格 行 结束 -> 
</table> <!-- 表 格 结束 --> 
效果 如 图 6.23 所 示 。 


全 表 属 x 
SC Qfile//F/bj 


居 上 对 齐 | 居 上 对 齐 


垂直 居中 


居 下 对 齐 


图 6.23 ”设置 行内 容 的 垂直 对 齐 三 种 方式 的 效果 图 
全 注意 : align 属性 和 valign 属性 在 HTML 中 ， 现 在 已 经 很 少 被 使 用 了 ， 因 为 在 Web 的 规 
定 中 ， 将 要 淘汰 align 属性 和 valign 属性 的 用 法 。 


6.6 ” 行 和 列 的 合并 


在 一 个 表格 里 ， 有 时 候 我 们 想 设置 的 表格 中 ， 并 不 一 定 每 行 每 列 的 行 数 和 列 数 都 是 一 
样 的 。 这 时 候 我 们 就 需要 进行 行 和 列 的 合并 。 本 节 就 来 讲解 行 和 列 合 并 的 方法 。 


6.6.1 行 的 合并 rowspan 


rowspan 属性 可 以 进行 行 的 合并 ， 就 是 把 几 列 中 的 几 行 合并 成 一 行 。 其 语法 结构 如 下 : 


<table> <1 表格 天 如 > 
E> <!-- 表 格 行 开始 --> 
<td rowspan="n"> </td> <!-- 表 格 列 --> 
</tr> <!-- 表 格 行 结 束 --> 
</table> <! 一 表格 结束 --> 
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其 中 ，n 为 合并 的 行 数 ， 数 字 是 几 就 代表 是 几 个 相 邻 的 行进 行 合并 。 行 的 数量 是 通过 


同 个 表格 里 列 中 最 多 行为 标准 来 计算 的 。 


【示例 6.23】 下 面 是 使 用 rowspan 属性 来 设置 行 合并 的 效果 。 代 码 如 下 : 
<!-- 表 格 开 始 ， 设 置 表格 边框 --> 


<table width="350px" border="1"> 
KEE> 
<td rowspan="2"> 合 并 第 1、2 行 </td> 
<td> 第 1 行 第 2 列 </tq> 
</Er> 
站 
<td > 第 2 行 第 2 列 </td> 
< /tr 
xr 
<tqd > 第 3 行 第 1 列 </td> 
<tqd > 第 3 行 第 2 列 </td> 
</tr> 
</table> 


效果 如 图 6.24 所 示 。 


<!-- 表 格 行 开始 --> 
<!-- 表 格 列 ， 设 置 行 合并 --> 
<!-- 表 格 列 --> 

<!-- 表 格 行 结束 --> 
<!-- 表 格 行 开 始 --> 
<!-- 表 格 列 --> 
<!-- 表 格 行 结束 --> 
<!-- 表 格 行 开 始 --> 
<!-- 表 格 列 --> 
<!-- 表 格 行 结束 --> 
<!-- 表 格 结束 --> 


' 站 行 的 合并 


全 访 CG 在 | 口 file///FVbj/ 升 级 /地 点 起 习 学 HTML+C' 交 | 三 


第 1 行 第 2 列 


合并 第 1、2 行 


第 2 行 第 2 列 


第 3 行 第 2 列 


图 6.24 使 用 rowspan 属性 来 设置 行 合并 效果 图 


6.6.2 列 的 合并 colspan 


colspan 属性 可 以 进行 列 的 合并 ， 就 是 把 几 行 中 的 几 列 合并 成 一 列 。 其 语法 结构 如 下 : 


<table> <!-- 表 : 
< <!-- 表 
<td colspan="n"> 表 格 内容 </td> <!-- 表 

</tr> 3 
</table> <!1-- 表 


其 中 ,n 为 合并 列 的 列 数 。 列 的 数量 是 通过 同 个 表格 


格 开始 --> 
格 行 开始 --> 
格 列 --> 

格 行 结束 --> 
格 结束 --> 


有 E 行 中 最 多 列 为 标准 来 计算 的 。 


大 


为 此 属性 的 列 是 跨 过 行 的 , 所 以 在 被 跨 过 的 行 里 , 列 的 计算 应 该 加 上 设置 了 跨 多 行 的 列 数 。 
【示例 6.24】 下 面 是 使 用 colspan 属性 来 设置 列 合 并 的 效果 。 代 码 如 下 : 


<table border="1" width="300px"> <!-- 表 格 开始 ， 设 置 表格 边框 为 1px--> 
<tr> <!-- 表 格 行 开 始 --> 
<td > 行 1</td> <!-- 表 格 列 --> 
<td > 行 2</td> <!-- 表 格 列 --> 
<td > 行 3</td> <!-- 表 格 列 --> 
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</tr> <!-- 表 格 行 结束 --> 
<tr> <! 一 -表格 行 开始 --> 
<td colspan="2"> 列 1 和 列 2 合并 </td> <!-- 设 置 列 合并 --> 
<td > 行 3</td> 
ES <!-- 表 格 行 结 束 --> 
<tr> <!-- 表 格 行 开 始 --> 
<td colspan="3"> 列 1、 列 2 和 列 3 合并 </tdq> <!-- 设 置 列 合 并 --> 
</Er> <!-- 表 格 行 结束 --> 
</table> <!-- 表 格 结束 --> 
效果 如 图 6.25 所 示 。 


万 CG 给 Dfile:///F:/bj/ 升 级 /零点 起 飞 学 HTML+C'Y? 三 


列 1 列 2 列 3 


贺 1 和 列 2 合并 列 3 


列 1、 列 2 和 列 3 合并 


图 6.25 使 用 colspan 属性 来 设置 列 合并 效果 图 
外 技巧 : 计算 好 行 数 和 列 数 ， 可 以 使 表格 显示 效果 清晰 整洁 和 容易 控制 ， 而 不 会 出 现 变形 
的 状况 出 现 。 


6.7 表格 分 组 


当 表 格 在 比较 复杂 的 网 页 中 使 用 时 ， 可 以 将 表格 分 为 表 头 、 主 体 、 行 尾 这 三 大 部 分 。 
在 浏览 器 的 读 取 中 ， 会 先 读 取 主 体 部 分 ， 这 也 就 使 比较 复杂 的 网 页 在 浏览 器 中 不 怕 因 为 头 
部 太 慢 而 影响 到 主体 部 分 的 显示 。 本 节 将 讲述 表格 分 组 的 方法 。 


6.7.1 表 头 标签 <thead> 
表 头 是 指 表 格 中 的 标题 部 分 ， 和 页 面 中 head 部 分 定义 上 有 些 相似 之 处 。 表 头 标签 


<thead> 用 于 组 合 表格 的 表 头 内 容 。 表 头 标签 <thead> 的 使 用 ， 可 以 让 网 页 中 过 长 的 表格 在 
显示 时 ， 每 页 的 最 前 面 都 可 以 显示 出 表 头 标签 <thead> 的 内 容 。 其 语法 结构 如 下 : 


<table> <!-- 表 格 开始 --> 
<thead> <!-- 表 头 开始 --> 
<tr> <!-- 表 格 行 开 始 --> 
<td> 表 格 内 容 </td> <!-- 表 格 列 --> 
</tr <!-- 表 格 行 结束 --> 
</thead> <!-- 表 头 结束 --> 
</table> <!-- 表 格 结束 --> 
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其 中 , <thead> 标 签 是 用 来 标识 行 的 , 所 以 在 使 用 上 , <thead> 标 签 要 写 在 <te> 标 签 外 面 ， 
也 就 是 把 <tr> 标 签 嵌 套 在 <thead> 标 签 里 面 。 由 于 表 头 、 主 体 、 行 尾 需 要 结合 起 来 使 用 ， 所 
以 <thead> 标 签 的 使 用 会 在 6.7.3 小 节 一 起 举例 说 明 。 


6.7.2 主体 标签 <tbody> 


主体 标签 <tbody> 用 于 组 合 表格 的 主体 内 容 。 语 法 形式 如 下 : 


<table> <!-- 表 格 开始 --> 
<tbody> <! 一 -主体 标签 开始 -> 
Ee <!-- 表 格 行 开始 --> 
<td> 表 格 内 容 </td> <!-- 表 格 列 --> 
ET <!-- 表 格 行 结束 --> 
</tbody> <!-- 主 体 标 签 结束 --> 
</table> <!-- 表 格 结束 --> 


其 中 ， 由 于 <tbody> 标 签 是 用 来 标识 行 的 ， 所 以 在 使 用 上 ，<tbody> 标 签 要 写 在 <tr> 标 
签 外 面 ， 也 就 是 把 <tr> 标 签 嵌 套 在 <tbody> 标 签 里 面 。 由 于 表 头 、 主 体 、 行 尾 需要 结合 起 来 
使 用 ， 所 以 <tbody> 标 签 的 使 用 会 和 <thead> 标 签 一 样 ， 在 6.7.3 小 节 一 起 举例 说 明 。 


6.7.3 行 尾 标签 <tfoot> 


行 尾 标签 <tfoot> 适 用 于 对 表格 中 的 表 注 《页 脚 ) 内 容 进行 分 组 。 行 尾 标签 <tfoot> 的 使 
用 ， 可 以 让 网 页 中 过 长 的 表格 在 显示 时 ， 每 页 的 最 后 面 都 可 以 显示 出 尾 注 标签 <tfoot> 的 内 
容 。 语 法 形式 如 下 : 


<table> <!-- 表 格 开始 --> 
<tfoot> <!-- 尾 注 标签 开始 --> 
<tr> <!-- 表 格 行 开 始 --> 
<td></td> <!-- 表 格 列 --> 
</tr> <!-- 表 格 行 结束 --> 
</tfoot> <!-- 尾 注 标签 结束 --> 
</table> <!-- 表 格 结束 --> 


其 中 ， 由 于 <tfoof> 标 签 是 用 来 标识 行 的 ， 所 以 在 使 用 上 ，<ttoo 人 标签 要 写 在 <t> 标 签 
外 面 ， 也 就 是 把 <te> 标 签 嵌 套 在 <tfoof> 标 签 里 面 。 由 于 表 头 、 主 体 、 行 尾 是 作为 表格 的 标 
识 标签 ， 在 示例 中 使 用 的 是 简单 的 表格 ， 所 以 在 显示 效果 上 ， 会 看 不 出 表 头 、 主 体 、 尾 注 
的 显示 效果 。 

【示例 6.2S】 下 面 是 使 用 表 头 、 主 体 、 行 尾 标签 来 显示 表格 的 效果 ， 代 码 如 下 : 

<table border="1lpx" width="300px"> <!-- 表 格 开始 ， 设 置 表格 边框 --> 


<thead> En 
<tr> 
<tqd> 时 间 </tqd> 
<td> 人 数 </td> 
<A 
</thead> <!-- 表 头 结束 --> 
<tbody> <!-- 主 体 标签 开始 --> 
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<EE> 
<td>2012 年 11 月 </td> 
<td>100 人 </td> 


过 XEE 
</tbody> <!-- 主 体 标 签 结束 --> 
<tfoot> <!-- 行 尾 标签 开始 --> 
<tr> 
<td colspan="2"> 注 释 : </td> 
Er> 
</tfoot> <!-- 行 尾 标签 结束 --> 
</table> <!-- 表 格 结束 --> 
效果 如 图 6.26 所 示 。 
{CE = a 
© 3C HOfle/b a 
时 间 人 数 表 头 
2012 年 11 月 100 人 主体 
注释 : 行 尾 


图 6.26 使 用 表 头 、 主 体 、 尾 注 标签 显示 表格 效果 图 


全 说 明 : 这 种 表 头 、 主 体 、 尾 注 的 注释 方法 ， 在 设计 师 制 作 网 站 时 ， 是 比较 少 用 到 的 。 


6.8 ”表格 标题 标签 <caption> 


表格 标题 是 一 个 表格 的 内 容 的 总 结 ， 通 常 被 居中 显示 在 表格 的 上 方 。<caption> 标 签 是 
用 来 定义 表格 的 标题 的 ， 它 必须 紧 随 <table> 标 签 之 后 ， 并 且 每 个 表格 只 能 定义 一 个 标题 。 
其 语法 结构 如 下 : 


<table> <! 一 表格 开始 -> 
<caption> 表 格 标题 </caption> <!-- 表 格 标题 标签 --> 
<tr> <!-- 表 格 行 开始 --> 
<td></td> <! 一 表格 列 --> 
</tr> <!-- 表 格 行 结束 --> 
</table> <!-- 表 格 结束 --> 


其 中 ，<caption> 标 签 没有 嵌 套 住 表格 里 面 的 标签 ， 而 是 独立 地 放 在 <table> 标 签 下 面 。 
【示例 6.26】 下 面 是 使 用 <caption> 标 签 来 显示 表格 标题 的 效果 ， 代 码 如 下 : 


<table border="1lpx" width="300px"> 
<!-- 表 格 开始 ， 设 置 表格 边框 为 1px， 宽 度 为 300px--> 


<caption> 表 格 标题 </caption> <!-- 表 格 标题 标签 --> 
<tr> <!-- 表 格 行 开始 --> 
<td> 表 格 内 容 </td> <!-- 表 格 列 --> 
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<td> 表 格 内 容 </td> 
> <!-- 表 格 行 结束 --> 
<Er> <!-- 表 格 行 开始 --> 
<td> 表 格 内 容 </td> <! 一 -表格 列 --> 
<td> 表 格 内 容 </td> 
</tr> <!-- 表 格 行 结束 --> 
</table> <!-- 表 格 结束 --> 
效果 如 图 6.27 所 示 。 


€ 3 C A Ofile//F/bj 


表格 标题 


表格 内 容 表格 内 容 
表格 内 容 表格 内 容 


图 6.27 使 用 <caption> 标 签 来 显示 表格 标题 效果 图 


6.9 本 章 小 结 


本 章 学 习 了 表格 的 各 种 使 用 方法 。 详 细 讲 解 了 表格 的 各 种 属性 的 设置 以 及 表格 边框 、 
对 齐 方 式 等 的 使 用 方法 。 表 格 是 网 页 中 的 一 个 重要 元 素 ， 也 是 应 用 最 多 的 一 个 元 素 ， 因 此 
读者 要 认真 学 习 表格 的 使 用 。 下 一 章 我 们 将 讲解 多 媒体 元 素 。 


6.10 本 章 习 题 


【习题 6-1】 在 网 页 中 插入 一 个 3 行 3 列 的 空 表 格 ， 效 果 如 图 6.28 所 示 。 


夺 访 C 人 Ofiley//F/bj/ 安 入 


王 王 三 


图 6.28 插入 表格 效果 图 


【习题 6-2】 在 网 页 中 插入 一 个 3 行 3 列 、 边 框 粗细 为 2px、 颜 色 为 蓝 色 的 空 表格 ， 设 
置 第 一 行 的 宽度 为 100px、 高 度 为 100px， 并 在 表格 中 插入 一 张 背 景 图 片 ， 效 果 如 图 6.29 
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所 示 。 


图 6.29 设置 表格 宽 和 高 并 插入 背景 图 片 效果 图 


【习题 6-3 】 在 网 页 中 插入 一 个 3 行 3 列 的 表格 ， 在 表格 中 添加 文字 ， 并 设置 对 齐 方式 
为 水 平 垂直 居中 ， 效 果 如 图 6.30 所 示 。 


Oahtml a “a 
全 六 C 从 | 加 filey//F/bj/ 天 级 /习题 /第 6 童 /6- 窑 | 以 


图 6.30 设置 表格 对 齐 方 式 效果 图 


【习题 6-4)】 在 网 页 中 插入 一 个 3 行 3 列 的 表格 ， 并 合并 第 一 行 和 第 二 行 的 前 两 列 ， 效 
果 如 图 6.31 所 示 。 


题 /第 6 齐 /5-4.html 


合并 第 1、2 行 的 第 1 列 和 第 2 列 和 


第 3 行 第 1 列 | 第 3 行 第 2 列 | 第 3 行 第 3 列 


4 > Ci © fle///F 


图 6.31 合并 单元 格 效 果 图 
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多 媒体 元 素 是 指 flash 动画 、 视频、 音频 等 有 声音 有 动画 的 文件 。 在 网 页 开发 和 设计 过 
程 中 ， 在 网 页 中 插入 多 媒体 元 素 ， 不 单 可 以 丰富 网 页 的 内 容 ， 还 可 以 使 网 页 更 加 生动 ， 更 
吸引 人 。 本 章 我 们 将 详细 讲述 多 媒体 元 素 在 网 页 中 的 使 用 。 


7.1 活动 字幕 <marquee> 


活动 字幕 也 称 为 滚动 看 板 、 滚 动 字 幕 ， 是 指 在 网 页 中 会 上 下 活动 或 左右 活动 的 字幕 ， 
可 以 是 文字 也 可 以 是 图 片 ， 可 以 通过 <marquee> 标 签 来 设置 。 活 动 字幕 的 使 用 使 得 整个 网 
页 更 有 动感 ， 显 得 很 有 生气 。 现 在 的 网 站 中 也 越 来 越 多 地 使 用 活动 字幕 来 加 强 网 页 的 互动 
性 。 本 节 将 详细 讲述 <marquee> 标 签 的 基本 属性 。 


7.1.1 <marquee> 标 签 概述 


<marquee> 标 签 是 用 来 设置 活动 字幕 的 ， 只 需要 把 <marquee> 标 签 放 在 想 产生 滚动 效果 
的 地 方 就 可 以 了 。<marquee> 标 签 是 双 标 签 ， 有 起 始 标签 和 结束 标签 。 在 <marquee> 标 签 里 
可 以 填写 文本 内 容 ， 也 可 以 链接 图 片 。 语 法 形式 如 下 : 

<marquee> 文 本 内 容 / 链 接 图 片 </marquee> <!-- 设 置 滚动 字幕 --> 


其 中 , 文本 内 容 /链接 图 片 放 在 <marquee> 标 签 中 ， 可 以 出 现 多 个 内 容 。<marquee> 标 签 
没有 限制 滚动 的 内 容 ， 但 是 会 限制 滚动 字幕 的 大 小 。 滚 动 字 幕 的 大 小 用 宽度 width 属性 和 
高 度 height 属性 进行 定义 。 其 中 ， 单 用 <marquee> 标 签 是 不 可 以 使 内 容 产 生 滚动 效果 的 ， 
<marquee> 标 签 需要 通过 设置 属性 值 才 可 以 产生 各 种 滚动 的 效果 。 下 面 将 详细 讲解 
<marquee> 标 签 里 的 属性 值 。 


外 说 明 : 滚动 字幕 <marquee> 标 签 有 个 不 好 的 地 方 ， 就 是 无 论 内 容 有 多 少 ， 都 是 要 等 到 全 
部 内 容 滚动 完 之 后 才 会 重新 开始 新 的 滚动 ,这样 造 成 了 滚动 到 后 面 时 会 产生 空白 
区 域 。 所 以 现在 已 经 用 JavaScript 脚本 逐渐 地 取代 了 <marquee> 标 签 的 用 法 。 


7.1.2 滚动 方式 behavior 


behavior 属性 可 以 用 来 设置 滚动 字幕 的 滚动 方式 。behavior 属性 具有 三 个 值 : scroll、 
slide、altermate， 分 别 表 示 三 种 滚动 方式 。 其 语法 结构 如 下 : 
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<marquee behavior="scroll/slide/alternate" > 文本 内 容 / 链 接 图 片 </marquee> 
<!-- 设 置 滚动 字幕 滚动 方式 --> 

其 中 ，behavior 属性 的 三 个 值 ，scroll 表示 滚动 循环 播 出 ;slide 表示 滚动 播放 一 次 ; 
alternate 表示 在 两 端 来 回 滚动 。 默 认 情况 下 为 behavior="scroll" 深 动 播 出 。 下面 将 逐一 介绍 。 

1. 滚动 循环 播 出 scroll 

behavior="scroll" 表 示 滚 动 字幕 循环 滚动 播 出 ， 即 当 字 幕 一 次 滚动 完 后 ， 又 会 重新 再 回 
到 原来 的 位 置 滚动 播 出 。 

【示例 7.1】 下 面 是 使 用 behavior="scroll" 来 显示 滚动 字幕 循环 滚动 播 出 的 效果 ， 代 码 
如 下 : 


<marquee behavior="scroll" width="200px" height="100px"> 滚 动 字 幕 循环 滚动 播 出 
</marquee> <!-- 设 置 滚动 字幕 循环 滚动 播 出 --> 


效果 如 图 7.1 所 示 。 


Om 
全 全 CC 在 fileWFVbj 
滚动 字幕 循环 滚动 播 出 


S33C Ofie//F/bj 


交 动 字幕 循环 滚动 播 出 


图 7.1 使 用 behavior="scroll" 效 果 图 

由 图 7.1 可 以 看 出 ，1 和 2 中 文字 的 位 置 是 不 一 样 的 ， 它 是 一 直 在 滚动 循环 播 出 的 。 

外 技巧 : 滚动 循环 播 出 在 网 站 制作 中 ， 是 很 经 常 出 现 的 一 种 滚动 形式 ， 通 常会 用 于 滚动 的 
图 片 等 。 

2. 滚动 播放 一 次 

有 时 候 会 希望 滚动 字幕 只 播放 一 次 ， 这 时 可 以 使 用 behavior="slide" 来 进行 设置 ， 它 表 
示 滚 动 字幕 滚动 到 一 方 后 停止 滚动 。 

【示例 7.2】 下 面 是 使 用 behavior="slide" 来 显示 滚动 字幕 滚动 一 次 具体 效果 ， 代 码 如 下 : 


<marquee behavior="slide" width="200px" height="100px"> 深 动 播放 一 次 </marquee> 
<!-- 设 置 滚动 字幕 只 滚动 一 次 --> 


效果 如 图 7.2 所 示 。 


局 要 属 x 
二 言 C 前 fiexy//F:/bj/ 示 例 html 窜 以 
滚动 播放 一 六 


同和 x 


$C 看 file:///F:/bj/ 示 例 html 


滚动 播放 一 次 


图 7.2 使 用 behavior="slide" 效 果 图 
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由 图 7.2 可 以 看 出 ，2 中 滚动 字幕 滚 到 左边 后 就 会 停止 ， 而 不 会 再 循环 滚动 。 

3. 两 端 来 回 滚动 

behavior-"altermnate" 可 以 设置 滚动 字幕 在 网 页 两 端 来 回 滚动 , 即 滚动 字幕 滚动 到 一 方 后 
向 相反 方向 滚动 。 

【示例 7.3】 下 面 是 使 用 behavior="altemate" 来 设置 字幕 来 回 滚动 的 效果 ， 代 码 如 下 : 


<marquee behavior="alternate" width="200px" height="100px"> 字 幕 来 回 滚动 
</marquee> <!-- 设 置 滚动 字幕 来 回 滚动 --> 


效果 如 图 7.3 所 示 。 


CG 人 filey///F:bj/ 示 例 htm 窑 入 所 访 CG 全 filey//F:bj/ 示 例 htm 窑 以 
字幕 来 回 滚动 


字幕 来 回 滚动 


7.3 ”使 用 behavior="altemate" 效 果 图 


日 图 7.3 可 以 看 出 ，1 中 字幕 是 由 右 向 左 滚动 ，2 中 字幕 是 由 左 向 右 滚动 。 


7.1.3 滚动 字幕 背景 颜色 bgcolor 


为 了 让 滚动 字幕 效果 更 好 看 ， 可 以 设置 滚动 字幕 的 背景 颜色 。<marquee> 标 签 里 的 
bgcolor 属性 就 是 用 来 设置 滚动 字幕 的 背景 颜色 。 其 语法 结构 如 下 : 


<marquee bgcolor=" 背 景 颜色 "> 文本 内 容 /链接 图 片 </marquee> 
<!-- 设 置 滚动 字幕 背景 颜色 --> 


之 前 已 经 讲 过 背景 颜色 的 填写 格式 ， 这 里 就 不 再 多 说 。 
【示例 7.4】 下 面 是 使 用 bgcolor 属性 为 滚动 字幕 添加 背景 颜色 的 效果 ， 代 码 如 下 : 


<marquee bgcolor="#cccccc" width="300px" height="50px"> 深 动 字幕 添加 灰色 背景 
颜色 </marquee> <!-- 设 置 滚动 字幕 背景 颜色 --> 


效果 如 图 7.4 所 示 。 


和 言 CG 帮 file//FVbj/ 示 例 html 


图 7.4 使 用 bgcolor 属性 为 滚动 字幕 添加 背景 颜色 效果 图 
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外 技巧 : 一 般 滚动 字幕 的 使 用 ， 都 比较 少 设置 其 背景 颜色 。 


7.1.4 字幕 滚动 方向 direction 


字幕 滚动 方向 是 指 字幕 从 哪个 方向 开始 滚动 ， 可 以 通过 <marquee> 标 签 里 的 direction 
属性 来 进行 设置 。direction 属性 有 四 个 值 : left、right、up、down， 分 别 用 来 设置 字幕 从 右 
向 左 滚动 、 从 左 向 右 滚 动 、 从 下 向 上 滚动 、 从 上 向 下 滚动 ， 默 认 情况 下 为 direction="left" 
从 右 到 左 滚动 。 其 语法 结构 如 下 : 

<marquee direction="left/right/up/down"> 文 本 内 容 / 链 接 图 片 </marquee> <!-- 设 

置 深 动 字幕 滚动 方式 --> 

下 面 我 们 来 分 别 举例 说 明 。 

【示例 7.5】 下 面 是 使 用 direction="left" 来 设置 滚动 字幕 从 右 向 左 滚动 的 效果 ， 代 码 如 下 : 

<marquee direction="left" width="300px" height="50px"> 滚 动 字幕 从 右 向 左 滚动 

</marquee> <!-- 设 置 滚动 字幕 从 右 到 左 滚动 =-> 


效果 如 图 7.5 所 示 。 


全 访 CG 全 Ofiley//F/bj/ 示 例 html 家 | 入 全 C OfieW/F/bj/ 示 例 html 


滚动 字幕 从 右 | | | : 幕 从 右 向 左 滚动 
0 | _@ | 


图 7.5 使 用 direction="left" 设 置 从 右 向 左 滚动 效果 图 


【示例 7.6】 下 面 是 使 用 direction='right" 来 设置 滚动 字幕 从 左 向 右 滚动 的 效果 ， 代 码 


如 下 : 
<marquee direction="right" width="300px" height="50px"> 滚 动 字 幕 从 左 向 右 滚动 
</marquee> <!-- 设 置 滚动 字幕 从 左 到 右 滚动 --> 
效果 如 图 7.6 所 示 。 


国 表 阁 x 
CG 从 filey///F:/bj/ 示 例 .html 会 言 CG 人 省 filey//F:/bj/ 示 例 html 家 入 


动 字 幕 从 左 向 右 滚动 滚动 字幕 从 左 


0 © 


图 7.6 使 用 direction="right" 设 置 从 左 向 右 滚动 效果 图 
【示例 7.7】 下 面 是 使 用 direction- "up" 来 设置 滚动 字幕 从 下 向 上 滚动 的 效果 ， 代 码 如 下 : 


。99 。 
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<marquee direction="up" width="300px" height="150px"> 滚 动 字 幕 从 下 向 上 滚动 
</marquee> <!-- 设 置 滚动 字幕 从 下 向 上 滚动 -=-> 


效果 如 图 7.7 所 示 。 


全  C 第 | 加 file//FVbj/ 示 例 html 


滚动 字幕 从 下 向 上 滚动 


滚动 字幕 从 下 向 上 滚动 


图 7.7 使 用 direction="up" 设 置 从 下 向 上 滚动 效果 图 


【示例 7.8】 下 面 是 使 用 direction="down" 来 设置 滚动 字幕 从 上 向 下 滚动 的 效果 ， 代 码 
如 下 : 

<marquee direction="down" width="300px" height="150px"> 滚 动 字幕 从 上 到 下 滚动 

</marquee> <!-- 设 置 滚动 字幕 从 上 到 下 滚动 -=-> 


效果 如 图 7.8 所 示 。 


6 了 C 省 |@fileyVWFVbj/ 示 例 html 


滚动 字幕 从 上 到 下 滚动 


滚动 字幕 从 上 到 下 滚动 


7.8 使 用 direction="down" 设 置 从 上 向 下 滚动 效果 图 


7.1.5 字幕 滚动 速度 scrollamount 


scrollamount 属性 是 用 来 设置 滚动 字幕 滚动 时 的 速度 。 我 们 可 以 根据 我 们 的 需要 来 设置 
滚动 的 快慢 。 其 语法 结构 如 下 : 
<marquee scrollamount="n"> 文 本 内 容 /链接 图 片 </marquee> 
<! 一 设置 深 动 字幕 移动 速度 --> 
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其 中 ，n 用 来 填写 滚动 的 速度 ，n 的 最 小 值 是 1，1 是 滚动 字幕 最 慢 的 速度 ， 数 值 越 大 
滚动 就 越 快 。 

【示例 7.9】 下 面 是 使 用 scrollamount 属性 来 设置 字幕 滚动 速度 ， 代 码 如 下 : 

<marquee scrollamount="1" width="300px" height="150px"> 字幕 滚动 速度 

</marquee> <!-- 设 置 滚动 字幕 速度 --> 
于 在 截图 上 看 不 出 效果 ， 这 里 不 再 截图 ， 读 者 可 以 根据 代码 自己 演示 。scrollamount 
属性 的 属性 值 越 大 ， 移 动 的 速度 就 会 越 快 ， 通 常情 况 下 ， 都 会 设置 为 1 或 2。 


7.1.6 滚动 字幕 停顿 时 间 scrolldelay 


通过 scrolldelay 属性 可 以 设置 滚动 字幕 每 滚动 一 下 停顿 的 时 间 。 其 语法 结构 如 下 : 
<marquee scrolldelay="n"> 文 本 内 容 / 链 接 图 片 </marquee> 
<!-- 设 置 滚动 字幕 停顿 时 间 --> 
其 中 ，n 是 用 来 填写 滚动 停顿 的 时 间 ， 单 位 是 毫秒 。 当 值 越 大 的 时 候 停顿 的 时 间 就 越 
长 。 在 使 用 效果 上 和 scrollamount 属性 有 些 相似 ， 都 是 让 滚动 字幕 的 滚动 变 慢 ， 这 里 不 再 
举例 。 


7.1.7 ”设置 滚动 字幕 水 平和 垂直 空白 区 域 


滚动 字幕 水 平和 垂直 空白 区 域 是 指 滚动 字幕 与 放置 滚动 字幕 的 方 框 的 左右 和 上 下 的 
距离 , 可 以 通过 hspace 属性 来 设置 滚动 字幕 水 平 空白 区 域 , 通过 vspace 属性 来 设置 滚动 字 
幕 垂 直 空 白 区 域 。 其 语法 结构 如 下 : 

<marquee hspace="n" > 文本 内 容 / 链 接 图 片 </marquee> 

<!-- 设 置 滚动 字幕 水 平 空白 区 域 --> 
<marquee vspace="n" > 文本 内 容 / 链 接 图 片 </marquee> 
<!-- 设 置 滚 动 字幕 垂直 空白 区 域 --> 

其 中 ，n 是 用 来 填写 左右 距离 的 大 小 ， 单 位 为 像素 (px) ， 无 需 再 为 n 添加 单位 ， 不 
然 会 造成 无 法 显示 距离 。 下 面 来 分 别 举例 说 明 。 

【示例 7.10】 下 面 是 使 用 hspace 属性 来 显示 滚动 字幕 左右 距离 的 具体 效果 ， 由 于 水 平 
距离 是 要 放 在 方 框 里 才 可 以 显示 出 效果 的 ， 这 里 将 为 示例 添加 一 个 边框 为 1px 的 表格 。 代 
码 如 下 : 


<table border="1"> 

区 让 > 

<td> 

<marquee width="300px" bgcolor="#00ffff" height="150px" hspace="15" > 水 平 
空白 区 域 为 10px</marquee> <!-- 设 置 滚 动 字幕 水 平 空白 区 域 --> 

</td> 

</tr> 

</table> 


效果 如 图 7.9 所 示 。 
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OR X 
6  C 从 Ofile/WFVbj/ 示 例 html 


水 平 空白 区 域 为 10px 


图 7.9 使 用 hspace 属性 设置 水 平 距离 效果 图 
【示例 7.11】 下 面 是 使 用 vspace 属性 来 设置 滚动 字幕 垂直 距离 的 效果 ， 代 码 如 下 : 


<table bordqer="1"> 

2 

<td> 

<marquee width="300px" bgcolor="#00ffff" height="150px" vspace="15" > 和 皇 直 
空白 区 域 为 15px</marquee> <!-- 设 置 滚动 字幕 上 下 空白 区 域 --> 
</td> 

</Er> 

</table> 


效果 如 图 7.10 所 示 。 


二 了 C 检 file:y//F:/bj/ 示 例 .html 


垂直 空白 区 域 为 15px 


图 7.10 使 用 vspace 属性 设置 上 下 距离 效果 图 


7.1.8 字幕 滚动 次 数 loop 
loop 属性 可 以 设置 字幕 的 滚动 次 数 。 通 过 设置 ， 可 以 使 滚动 字幕 按 设 置 的 次 数 进行 循 
环 滚 动 ， 也 可 以 进行 无 限 循环 滚动 。 其 语法 结构 如 下 : 
<marquee loop="n" > 文本 内 容 / 链 接 图 片 </marquee> 。” <!-- 设 置 滚动 字幕 滚动 次 数 --> 
其 中 , n 是 用 来 填写 循环 的 次 数 的 。 当 n=-1 时 ， 是 无 限 次 循环 ， 当 n 是 正 数 时 ， 则 按 


"0 
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照 填写 的 次 数 进行 循环 深 动 。 
【示例 7.12】 下 面 是 使 用 loop 属性 来 设置 字幕 滚动 次 数 ， 代 码 如 下 : 


<marquee width="300px"” height="150px"” Loop="-1" > 滚动 次 数 </marquee> 
<!-- 设 置 滚动 字幕 滚动 次 数 --> 


由 于 在 截图 上 看 不 出 效果 ， 这 里 不 再 截图 ， 读 者 可 以 根据 代码 自己 演示 。 


7.1.9 设置 鼠标 滑 过 onMouseOver 


鼠标 滑 过 onMouseOver 属性 是 用 来 控制 鼠标 滑 过 滚动 字幕 时 停止 滚动 的 效果 。 此 效果 
必须 要 有 两 个 属性 值 来 进行 定义 。 其 语法 结构 如 下 : 

<marquee onMouseOut ="this.start() "onMouseOver="this.stop() " > 文本 内 容 / 

链接 图 片 </marquee> <!-- 设 置 鼠 标 滑 过 滚动 字幕 时 停止 滚动 效果 --> 

其 中 ，onMouseOut -thisstar0* 是 用 来 设置 鼠标 移出 该 区 域 时 继续 滚动 ， 
onMouseOver="this.stop() "是 用 来 设置 鼠标 移入 该 区 域 时 停止 滚动 。 通 过 这 两 个 属性 值 的 同 
时 使 用 ， 才 可 以 使 鼠标 滑 过 滚动 字幕 时 停止 滚动 ， 而 当 鼠 标 移 开 滚动 字幕 时 又 开始 滚动 。 
【示例 7.13】 下 面 是 使 用 onMouseOver 属性 来 显示 鼠标 滑 过 时 滚动 字幕 停止 滚动 的 效 
代码 如 下 : 
<marquee width="300px" height="50px" onMouseOut="this.start()" onMouseOver= 
"this.stop() " > 鼠标 滑 过 效果 </marquee> <!-- 设 置 鼠标 滑 过 深 动 字幕 时 停止 深 动 效果 --> 


效果 如 图 7.11 所 示 ， 可 以 看 出 ， 当 鼠标 移动 到 字幕 时 ， 字 幕 停止 滚动 。 


果 


全 会 C 利 |@file//FVbj/ 示 例 html 
鼠标 滑 过 时 


图 7.11 使 用 onMouseOver 属性 设置 鼠标 滑 过 时 滚动 字幕 的 效果 图 


外 技巧 : 滚动 字幕 的 图 片 插 入 ， 和 之 前 讲 的 在 文本 中 插入 图 片 是 一 样 的 ， 只 要 把 文本 换 成 
图 片 链接 即 可 。 


7.2 插入 多 媒体 元 素 


前 面 已 经 提 过 ， 多 媒体 就 是 指 flash 动画 、 视 频 、 音 频 等 有 声音 有 动画 的 元 素 。 插 入 多 
媒体 元 素 是 指 在 网 页 中 插入 flash 动画 、 视 频 、 音 频 等 。 插 入 多 媒体 元 素 ， 可 以 使 网 站 更 加 
生动 ， 更 加 吸引 人 。 本 节 将 详细 讲解 如 何在 网 页 中 插入 音乐 和 flash 动画 多 媒体 元 素 。 


wn 
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7.2.1 插入 音乐 


在 浏览 网 页 时 ， 经 常 可 以 看 见 某 个 网 页 里 会 添加 音乐 文件 。 在 网 页 中 插入 音乐 可 以 使 
用 <embed> 标 签 来 进行 设置 。<embed> 标 签 也 包含 有 许多 属性 ， 下 面 将 详细 讲解 <embed> 
标签 里 的 属性 的 设置 。 

1. 设置 路 径 src 

和 插入 图 片 一 样 , 插入 音乐 文件 也 需要 插入 正确 的 音乐 文件 的 路 径 。sre 属性 可 以 用 来 
设置 音乐 文件 路 径 ， 和 插入 图 片 的 用 法 是 一 样 的 。 其 语法 结构 如 下 : 

<embed src=" 音 乐 文件 路 径 ">></embed> <!-- 设 置 多 媒体 音乐 路 径 --> 

其 中 ， 具 体 路 径 的 写法 和 图 片 路 径 的 写法 是 一 样 的 ， 这 里 就 不 再 多 讲 。 

【示例 7.14】 下 面 是 使 用 src 属性 为 网 页 插入 音乐 文件 的 效果 ， 这 里 使 用 的 音乐 放 在 
images 文件 夹 里 。 代 码 如 下 : 


<embed src="images/ Sleep Away.mp3"></embed> <!-- 设 置 多 媒体 音乐 路 径 --> 


效果 如 图 7.12 所 示 。 


Orr Cp 


文件 (F) 。 蝙 句 (E) 查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 
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图 7.12 使 用 src 属性 插入 音乐 文件 效果 图 


全 说 了 明 : mp3 是 浏览 器 所 支持 的 格式 ， 所 以 一 打开 网 页 就 会 自动 显示 出 播放 器 进行 播放 。 


2. 自动 播放 autostart 


autostart 属性 用 来 设置 音乐 文件 在 页 面 打开 时 是 否 进行 自动 播放 。 它 有 两 个 值 : true 
和 false。 其 语法 结构 如 下 : 

<embed src=" 音 乐 文件 路 径 " autostart="true/false"></embed> 

<!-- 设 置 多 媒体 音乐 是 否 自动 播放 --> 

其 中 ， 当 autostart="true" 时 ， 表 示 音 乐 文 件 在 页 面 打 开 时 进行 自动 播放 ; 当 autostart= 
"false" 时 ， 表 示 音 乐 文件 在 页 面 打开 时 不 进行 自动 播放 。 在 没有 设置 的 情况 下 ， 默 认为 自 
动 播放 。 

【示例 7.1S】 下 面 是 使 用 autostart 属性 为 网 页 设置 自动 播放 的 效果 , 这 里 设置 音乐 文件 
不 自动 播放 。 代 码 如 下 : 
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<embed src="images/Sleep Away.mp3" autostart="false"></embed> 
<!-- 设 置 多 媒体 音乐 不 进行 自动 播放 --> 


效果 如 图 7.13 所 示 ， 可 以 看 到 当 网 页 打开 时 ， 音 乐 文件 没有 自动 播放 。 


图 7.13 ”使 用 autostart 属性 设置 自动 播放 效果 图 


3. 循环 播放 loop 


这 里 的 loop 和 活动 字幕 的 loop 作用 不 太一 样 。 这 里 的 loop 只 能 设置 音乐 文件 是 否 进 
行 循环 播放 ， 不 能 设置 循环 播放 的 次 数 。 这 里 的 loop 属性 只 有 两 个 值 : tue 和 false。 其 语 
法 结构 如 下 : 
<embed src=" 音 乐 文件 路 径 " loop="true/false"></embed> 
<!-- 设 置 多 媒体 音乐 是 否 循环 播放 --> 


其 中 ， 当 loop="true" 时 ， 表 示 音 乐 文件 进行 循环 播放 ， 当 loop="false" 时 ， 表 示 音 乐 文 
件 不 进行 循环 播放 。 在 没有 设置 的 情况 下 ， 默 认为 loop="false" 不 进行 循环 播放 。 
【示例 7.16】 下 面 是 使 用 loop 属性 来 设置 循环 播放 的 效果 ， 这 里 设置 音乐 文件 循环 播 
放 。 代 码 如 下 : 
<embed src="images/ Sleep Away.mp3" loop="true"></embed> 
<! 一 设置 多 媒体 音乐 自动 播放 --> 


效果 如 图 7.14 所 示 ， 当 音乐 文件 一 过 播放 完 后 ， 会 自动 循环 播放 。 


文件 (篇 问 (FE) 前 看 (V) ”收藏 次 (A) 工具 (T) 帮助 (H) 
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7.14 使 用 loop 属性 设置 循环 播放 效果 图 


4. 隐藏 播放 版 面 hidden 


hidden 属性 可 以 用 来 设置 是 否 隐藏 音乐 文件 的 播放 器 。 隐 藏 了 播放 器 后 ， 音 乐 还 会 继 
续 播 放 ， 但 却 看 不 见 播放 器 。hidden 属性 有 两 个 属性 值 : true 和 false。 其 语法 结构 如 下 : 


a 
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<embed src=" 音 乐 文件 路 径 " hidden="true/false"></embed> 
<!-- 设 置 多 媒体 音乐 是 否 隐藏 播放 版 面 --> 
其 中 ， 当 hidden="true" 时 ， 表 示 隐 藏 音乐 文件 的 播放 器 ， 但 是 音乐 文件 还 是 会 继续 播 
放 ; 当 hidden="false" 时 ， 表 示 不 隐藏 音乐 文件 的 播放 器 。 
【示例 7.17】 下 面 是 使 用 hidden 属性 隐藏 音乐 文件 的 播放 器 的 效果 ， 这 里 设置 隐藏 音 
乐 文件 的 播放 器 。 代 码 如 下 : 
<embed src="images/ Sleep Away.mp3" hidden="true"></embed> 
<! 一 -设置 多 媒体 音乐 隐藏 播放 版 面 --> 


效果 如 图 7.15 所 示 ， 能 听见 音乐 ， 却 看 不 见 播放 器 。 


本 


图 7.15 使 用 hidden 属性 隐藏 播放 器 效果 图 


7.2.2 插入 flash 


<object> 标 签 用 来 插入 flash 文件 。 插 入 flash 文件 和 插入 音乐 文件 不 同 ，flash 文件 的 
插入 比 插入 音乐 文件 要 复杂 ， 需 要 通过 多 个 标签 和 属性 的 设置 来 完成 。 本 小 节 就 来 详细 介 
绍 插入 flash 的 <objec 人 标签 及 其 属性 设置 。 

<object> 标 签 用 来 插入 多 媒体 文件 。 它 可 以 出 现在 网 页 的 头 部 head 部 分 body 
里 面 。<object> 标 签 通过 两 个 属性 值 来 对 插入 的 flash 进行 属性 设置 。 其 语法 结构 如 下 : 

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase= 

"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ve 

rsion=9,0,28,0" width="" height=""> </object> <!-- 插 入 flash 文件 --> 

其 中 ，classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"， 是 固定 形式 ， 通 过 
和 codebase 属性 一 起 使 用 ， 提 供给 flash 一 个 基本 标准 的 URL。codebase="http://download. 
macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"， 也 是 固定 形式 , 它 
指定 了 一 个 路 径 ， 此 路 径 的 目录 包含 了 classid 属性 所 填写 的 对 象 。width 属性 和 height 属 
性 填写 的 是 要 插入 的 flash 的 宽度 和 高 度 。 由 于 单独 使 用 <object> 标 签 无 法 使 用 flash 文件 ， 
所 以 在 这 里 将 不 做 举例 说 明 ， 示 例会 在 下 面 的 标签 里 一 起 讲述 。 


7.2.3 显示 flash 


插入 了 flash 以 后 ， 还 要 通过 <param> 标 签 来 显示 flash， 此 标签 被 嵌 套 在 <objec 亿 标签 
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里 面 。<param> 标 签 有 两 个 属性 ， 用 来 设置 flash 的 显示 效果 。 其 语法 结构 如 下 : 


<!-- 开 始 插入 flash 文件 --> 

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase= 
"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ve 
rsion=9,0,28,0" width="" height=""> 

<param name="" value="" /> 


</object><!-- 结 束 插入 flash 文件 --> 


其 中 ，<param> 标 签 是 单 标签 ， 所 以 需要 加 / 号 来 关闭 <param> 标 签 。name 是 用 来 定 
义 参 数 的 唯一 的 名 字 ，value 是 用 来 定义 前 面 定义 的 参数 的 值 ， 这 两 个 属性 是 需要 同时 在 
<param> 标 签 里 出 现 的 。 在 插入 flash 时 ， 需 要 设置 <param> 标 签 里 name 的 必须 存在 的 两 个 
参数 ， 这 两 个 参数 是 要 放 在 一 起 使 用 的 。 
【示例 7.18】 下 面 是 使 用 <objec 人 标签 和 <param> 标 签 来 插入 flash 和 显示 flash 的 效果 ， 
使 用 的 flash 文件 放 在 images 文件 夹 。 代 码 如 下 : 
<!-- 开 始 插入 flash 文件 --> 
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase= 
"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ve 
rsion=9,0,28,0" width="450" height="300"> 
<param name="movie" value="images/ww.swf" /> 
<param name="quality" value="high" /> 
</object> 


<!-- 结 束 插入 flash 文件 --> 
效果 如 图 7.16 所 示 。 


国 辐 EETCCECEETCTECCO 有 ER 


文件 (月 ”篇 强 (E) 查看 (V) 收藏 交 (A) 工具 (T) 帮助 (H) 
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图 7.16 使 用 <object> 标 签 和 <param> 标 签 插 入 flash 效果 图 


全 注意 : 单独 使 用 <objecf> 标 签 和 <param> 标 签 ， 会 出 现 一 个 问题 ， 需 要 一 个 holder swf 来 
加 载 flash 文件 ， 以 保证 IE 中 能 正常 显示 到 flash 文件 。 


7.2.4 <embed> 标签 


1 于 <objec 亿 标签 和 <param> 标 签 存在 的 兼容 性 的 问题 ， 需 要 引入 另 一 个 插入 flash 的 
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标签 一 一 <embed> 标 签 。 此 标签 的 显示 效果 和 上 面 所 说 的 <objec 忆 标签 加 <param> 标 签 的 效 
果 是 一 样 的 。 由 于 <embed> 标 签 本 身 的 兼容 性 也 不 好 ,这 时 候 就 可 以 在 <object> 标 签 中 再 揪 
入 <embed> 标 签 来 达到 兼容 。 一 般 在 使 用 上 ， 都 是 将 <embed> 标 签 写 在 <object> 标 签 里 面 、 
<param> 标 签 后 面 。 其 语法 结构 如 下 : 


<!-- 开 始 插入 flash 文件 --> 
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase= 
"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ve 
rsion=9,0,28,0" width="" height=""> 

<param name="movie" value=" " /> 

<param name="quality" value="high" /> 

<embed src=" " quality="high" pluginspage="http://www.adobe.com/ 
shockwave/download/download.cgi?P1 Prod Version=ShockwaveFlash" 
type="application/x-shockwave-flash" width="" height=""></embed> 
</object> 


<! 一 结束 插入 flash 文件 --> 


其 中 ，pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1 Prod 
Version=ShockwaveFlash" type="application/x-shockwave-flash" 这 两 个 属性 值 和 <object> 标 
签 里 的 classid 属性 、codebase 属性 是 同样 的 用 法 ，<objec 忆 标签 和 <param> 标 签 有 的 参数 ， 
<embed> 标 签 也 要 有 相应 的 属性 。 

【示例 7.19】 下 面 是 使 用 <objecf 标 签 、<param> 标 签 和 <embed> 标 签 插入 flash 的 效果 ， 
代码 如 下 : 


<!-- 开 始 插入 flash 文件 --> 
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase= 
"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ve 
rsion=9,0,28,0" width="450" height="300"> 

<param name="movie" value="images/ww.swf" /> 

<param name="quality" value="high" /> 

<embed src="images/ww.swf" quality="high" pluginspage="http://www.adobe. 
com/ shockwave/download/download.cgi?P1 Prod Version=ShockwaveFlash" 
type="application/x-shockwave-flash" width="450" height="300"></embed> 
</object> 


<! 一 -结束 插入 flash 文件 --> 
效果 如 图 7.17 所 示 。 


(DOBrearmeo .ox|S sa x 5 


文件 内 。 篇 句 (E) 查看 (V) 收藏 交 (A) 工具 (T) 。 帮助 (H) 


play 


lL 成 100% ~ 


图 7.17 使 用 <objec 亿 标签、<param> 标 签 和 <embed> 标 签 插 入 flash 效果 图 
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7.3 插入 背景 音 


在 上 一 节 介 绍 了 在 网 页 中 插入 音乐 文件 的 方法 ， 同 样 的 也 可 以 在 网 页 中 插入 背景 音 
乐 。 使 用 <bgsound> 标 签 就 可 以 插入 背景 音乐 。 背 景 音乐 文件 支持 的 格式 为 wav，midi， 
mp3 等 后 缀 的 文件 。 本 节 将 详细 讲述 <bgsound> 标 签 里 的 各 个 属性 。 


7.3.1 背景 音乐 路 径 src 


和 插入 音乐 文件 一 样 ，src 属性 也 可 以 设置 背景 音乐 的 路 径 ， 不 过 要 放 在 <bgsound> 标 
签 里 才能 用 来 设置 背景 音乐 的 路 径 。 其 语法 结构 如 下 : 
<bgsound src=" 背 景 音乐 路 径 ” /> <!-- 设 置 背 景 音乐 路 径 --> 


可 以 看 到 ，<bgsound> 标 签 是 单 标签 ， 所 以 要 使 用 / 号 来 关闭 标签 。 对 于 路 径 的 填写 ， 
和 之 前 说 过 的 图 片 路 径 的 填写 方法 是 一 样 的 ， 这 里 就 不 再 多 讲 。 需 要 注意 的 是 <bgsound> 
标签 可 以 放 在 <head> 里 面 ， 也 可 以 放 在 <body> 里 面 。 

【示例 7.20】 下 面 是 使 用 src 属性 为 网 页 插入 背景 音乐 的 效果 ， 这 里 将 <bgsound> 标 签 
放 在 <body> 里 面 。 代 码 如 下 : 

<bgsound src="images/Sleep Away.mp3" /> <!-- 设 置 背 景 音 乐 --> 

插入 背景 音乐 


效果 如 图 7.18 所 示 ， 打 开 网 页 后 就 能 听见 背景 音乐 ， 而 没有 音乐 播放 器 。 
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图 7.18 使 用 sre 属性 插入 背景 音乐 效果 图 


7.3.2 自动 播放 autostart 


通过 autostart 属性 可 以 来 设置 打开 网 页 时 背景 音乐 是 否 自动 播放 。autostart 属性 有 两 
个 值 : true 和 false。 其 语法 结构 如 下 : 


<bgsound src=" 背 景 音乐 路 径 " autostart="true/false" /> 
<!-- 设 置 背景 音乐 是 否 自动 播放 --> 


其 中 , 当 autostart="true" 时 ,表示 打开 网 页 时 背景 音乐 进行 自动 播放 ; 当 autostart="false" 
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时 ， 表 示 打 开 网 页 时 背景 音乐 不 进行 自动 播放 。 由 于 背景 音乐 不 进行 自动 播放 就 很 难 再 使 
背景 音乐 播放 ， 所 以 一 般 情 况 下 ，autostart="true "。 

【示例 7.21】 下 面 是 使 用 autostart 属性 设置 背景 音乐 自动 播放 的 具体 效果 , 这 里 设置 背 
景 音乐 为 自动 播放 。 代 码 如 下 : 


<bgsound src="images/ Sleep Away.mp3" autostart="true" /> 
<!-- 设 置 背景 音乐 自动 播放 --> 


自动 播放 背景 音乐 
效果 如 图 7.19 所 示 ， 打 开 网 页 后 ， 背 景 音乐 就 会 自动 播放 。 


WD DD NEM - OX Ep x 1 
| 文 作 (入 组 (6 坦 看 (V) 收藏 闪 A) 工具 (T) 帮助 (H) 
自动 播放 背景 音乐 

或 100% ~ 


图 7.19 使 用 autostart 属性 设置 背景 音乐 自动 播放 效果 图 


7.3.3 ”循环 播放 loop 


通过 loop 属性 同样 也 可 以 设置 背景 音乐 的 循环 播放 次 数 。 但 这 里 的 loop 属性 和 之 前 
所 说 loop 属性 的 属性 值 有 些 不 同 。 其 语法 结构 如 下 : 

<bgsound src=" 背 景 音乐 路 径 "”loop=n/infinite /> <!-- 设 置 背 景 音乐 循环 播放 -> 

其 中 ，n 用 来 填写 背景 音乐 的 循环 次 数 。loop 属性 在 这 里 除了 可 以 填写 数字 外 ， 还 可 
以 设置 为 infinite， 表 示 背 景 音乐 无 限 循环 播放 。 

【示例 7.22】 下 面 是 使 用 loop 属性 设置 背景 音乐 循环 播放 的 效果 ， 代 码 如 下 : 


<bgsound src="images/ Sleep Away.mp3" loop="infinite" /> 


<!-- 设 置 背景 音乐 无 限 循 环 播放 --> 
无 限 循环 播放 背景 音乐 


效果 如 图 7.20 所 示 。 


| 文件 (。 妨 纺 (E) 查看 V) 收藏 交 A) 工具 MT) 帮助 (H) 
无 限 循环 播放 背景 音乐 


转 100% > 


图 7.20 使 用 loop 属性 设置 背景 音乐 循环 播放 效果 图 
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全 注意 ' 当 <bgsound> 标 签 放 在 <body> 里 面 的 时 候 ， 要 放 在 最 前 面 。 


7.4 本 章 小 结 


本 章 学 习 了 多 媒体 元 素 的 用 法 。 详 细 讲 解 了 活动 字幕 的 实现 方法 以 及 多 媒体 元 素 的 插 
入 和 显示 。 本 章 的 难点 在 于 flash 的 插入 ， 在 前 面 的 学 习 中 可 以 发 现 flash 的 插入 相对 的 比 
较 复杂 , 但 是 基本 上 flash 插入 的 语法 格式 都 是 固定 的 ， 我 们 只 要 直接 嵌 套 就 可 以 了 。 下 一 
章 我 们 将 讲解 HTML 中 的 框架 。 


7.5 本 章 习 题 


【习题 7-1】 在 网 页 中 插入 活动 字幕 ， 设 置 背景 颜色 为 蓝 色 , 滚动 方式 为 循环 滚动 播放 ， 
滚动 方向 为 从 左 到 右 ， 并 设置 鼠标 滑 过 滚动 字幕 时 停止 滚动 ， 效 果 如 图 7.21 所 示 。 
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图 7.21 设置 滚动 字幕 效果 图 


【习题 7-2】 在 网 页 中 插入 音乐 ， 使 音乐 在 打开 网 页 时 自动 播放 ， 并 且 进行 循环 播放 ， 
效果 如 图 7.22 所 示 。 


图 7.22 插入 音乐 效果 图 
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在 浏览 器 中 ， 一 个 页 面 对 应 一 个 窗口 ， 页 面 中 的 内 容 显示 在 整个 窗口 中 。 但 有 时 候 我 
们 希望 一 个 浏览 器 窗口 可 以 显示 多 个 页 面 ， 为 了 避免 网 页 结构 混乱 ， 就 需要 对 网 页 进行 合 
理 架构 。 而 框架 就 是 网 页 设计 中 经 常 使 用 的 设计 方式 ， 其 作用 就 是 把 网 页 在 一 个 浏览 器 窗 
口 下 划分 成 儿 个 部 分 ， 让 网 页 结构 更 加 的 清晰 ， 而 且 修 改 起 来 也 互 不 干扰 。 本 章 将 详细 讲 
解 框架 的 使 用 。 
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框架 实际 上 是 一 种 特殊 的 网 页 ， 它 是 指 将 一 个 页 面 分 成 多 个 区 域 ， 每 个 区 域 都 是 一 个 
单独 的 页 面 。 修 改 任意 一 个 区 域 ， 而 另外 的 区 域 不 会 受 影响 。 框 架 把 页 面 分 成 儿 个 部 分 ， 
这 有 利于 网 页 的 编辑 ， 编 辑 不 同 网 页 的 时 候 相同 的 地 方 就 可 以 直接 调用 ， 只 需要 修改 不 同 
的 地 方 就 可 以 了 。 

使 用 框架 也 有 不 好 的 地 方 , 使 用 框架 页 面 不 容易 打印 , 由 于 是 几 个 页 面 组 合 在 一 起 的 ， 
太 过 于 复杂 的 代码 会 使 一 些 搜索 引擎 无 法 搜索 到 。 所 以 在 使 用 上 ， 为 了 使 网 站 易于 搜索 ， 
应 尽量 避免 使 用 框架 。 


8.2 基本 结构 


<frameset> 标 签 和 <frame> 标 签 可 以 用 来 设置 框架 的 基本 结构 。<framese 人 标签 表示 一 
个 大 的 框架 ， 通 常 称 为 框架 集 ; <frame> 标 签 表 示 大 框架 里 的 子 框架 ， 通 常 称 为 框架 。 其 语 
法 格式 如 下 : 


<frameset> <!-- 开 始 插入 框架 --> 
<frame src=" 框 架 连 接 的 页 面 的 URL" /> 
</frameset> <!-- 结 束 插入 框架 --> 


在 网 站 设计 中 最 常见 的 框架 结构 有 上 中 下 结构 、 上 左右 结构 ， 如 图 8.1、 图 8.2 所 示 。 


图 8.1 上 中 下 结构 框架 图 图 8.2 上 左右 结构 框架 图 


8.3 ”框架 集 <frameset> 


框架 集 是 用 来 定义 一 组 框架 的 布局 和 属性 ， 包 括 框架 的 数目 、 大 小 、 位 置 等 。 可 以 说 
框架 集 包 含 着 框架 。<framese 忆 标签 可 以 用 来 定义 框架 集 。<framese 必 标签 包含 很 多 属性 ， 
这 些 属性 可 以 设置 框架 的 布局 ， 修 饰 框架 的 总 体 效 果 。 本 节 将 详细 讲述 框架 集 <frameset> 
标签 里 各 个 属性 的 设置 。 


8.3.1 框架 集 宽度 cols 


使 用 cols 来 设置 框架 集 的 宽度 ， 可 以 将 框架 集 在 水 平方 向 分 割 成 几 个 框架 。 其 语法 结 
构 如 下 : 

<frameset cols="coll,col2,col3,*"> <!-- 开 始 插入 框架 --> 

<frame src=" 框 架 连 接 的 页 面 的 URL " /> 

</frameset> <!-- 结 束 插入 框架 --> 

其 中 ，coll，col2，col3 用 来 填写 子 框 架 的 宽度 ， 可 以 是 百分比 、 像 素 ， 也 可 以 是 剩余 
值 * 号 ， 之 间 使 用 英文 的 逗号 隔 开 ,， 想 出 现 多 少 个 子 框架 就 写 多 少 个 宽度 。 使 用 百分比 时 需 
要 注意 ， 引 号 里 面 每 个 宽度 的 百分比 全 部 加 起 来 要 等 于 100%。 

剩余 值 * 号 表示 所 有 框架 设 定之 后 的 剩余 部 分 。 当 符号 * 只 出 现 一 次 ， 即 其 他 框架 的 大 
小 都 有 明确 的 定义 时 ， 表 示 该 框架 的 大 小 将 根据 浏览 器 窗口 的 大 小 而 自动 调整 ， 当 符号 * 
出 现 一 次 以 上 时 ， 表 示 按 比例 分 割 浏览 器 窗口 的 剩余 空间 。 

【示例 8.1】 下 面 是 剩余 值 * 号 的 具体 使 用 例子 ， 由 于 是 单独 讲解 剩余 值 * 号 ， 所 以 这 里 
将 不 做 图 解 。 代 码 如 下 : 

<frameset cols="40%,2*,*"> <!-- 将 窗口 分 为 40%，40%，20% -> 

<frameset cols="100,200,*"> <!-- 将 窗口 分 为 100 像素 ，200 像素 ， 自 由 扩展 --> 


mi 


第 1 篇 HIML 网 站 开发 


<frameset cols="100,*,*"> <!-- 将 100 像素 以 外 的 窗口 平均 分 配 --> 
<frameset cols="*,*,*"> <!-- 将 窗口 分 为 三 等 份 --> 


外 说 明 : 在 cols 属性 没有 设置 的 情况 下 ， 默 认为 一 个 框架 。 


【示例 8.2】 下 面 是 使 用 cols 属性 来 设置 一 个 左 中 右 框架 的 效果 。 由 于 框架 的 作用 ， 这 


将 会 有 三 个 框架 页 面 产生 ， 框 架 集 页 面 命名 为 8.2.html， 三 个 框架 页 面 依 此 命名 为 


8.2.1.html、8.2.2.html、8.2.3.html。 代 码 如 下 。 


8.2.html 页 面 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
w3 .org/TR/xhtm11/DTD/Vxhtm11-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtm1"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 8.2</title> 


</head> 

<frameset cols="200,*,*"> <!-- 将 200 像素 以 外 的 窗口 平均 分 配 --> 
<frame src="8.2.1.html" /> <!-- 插入 框架 8.2.1.html --> 
<frame src="8.2.2.html" /> <!-- 插入 框架 8.2.2.html --> 
<frame src="8.2.3.html" /> <!-- 插入 框架 8.2.3.html --> 

</frameset> 

</html> 


全 注意 ; 在 HTML 文档 中 使 用 框架 集 要 定义 在 <body> 标 签 和 <head> 标 签 之 间 ， 不 能 定义 


标 
在 <body> 标 签 和 <html> 标 签 里 。 否 则 会 导致 浏览 器 忽略 所 有 的 框架 集 定义 而 只 显 
示 <body> 和 </body> 之 间 的 内 容 。 


8.2.1.html 页 面 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
Ww3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.0org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 框 架 1</title> 

</head> 

<body> 

左边 框架 

</body> 

</html> 


8.2.2.html 页 面 代 码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
Ww3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 框 架 2</title> 

</head> 

<body> 

中 间 框 架 

</body> 

</html> 
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8.2.3.html 页 面 代 码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
Ww3.0org/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 框 架 3</title> 

</head> 

<body> 

右边 框架 

</body> 

</html> 


效果 如 图 8.3 所 示 。 


图 8.3 使 用 cols 属性 设置 框架 集 宽度 效果 图 


8.3.2 ”框架 集 高 度 rows 


使 用 rows 属性 来 设置 框架 集 的 高 度 , 即 可 以 将 框架 集 在 垂直 方向 分 割 为 几 个 框架 。 其 
语法 结构 如 下 : 
<frameset rows="rowl,row2,row3,*"> <!-- 开 始 插入 框架 --> 


<frame src=" 框 架 连 接 的 页 面 的 URL " /> 
</frameset> <!-- 结 束 插入 框架 --> 


其 中 ，row1，row2，row3 用 来 填写 框架 的 高 度 ， 可 以 是 百分比 、 像 素 ， 也 可 以 是 剩余 
值 * 号 ， 之 间 使 用 英文 的 逗号 隔 开 ， 想 出 现 多 少 个子 框 架 就 写 多 少 个 高 度 。rows 属性 在 这 
里 的 用 法 和 cols 属性 的 用 法 是 一 样 的 ， 在 这 里 就 不 再 多 讲 了 。 

【示例 8.3】 下 面 是 使 用 rows 属性 来 设置 框架 集 高 度 ， 显 示 一 个 上 中 下 框架 的 效果 。 由 
于 框架 的 作用 ， 这 里 将 会 有 三 个 框架 页 面 产生 ， 框 架 集 页 面 命名 为 8.3.html， 三 个 子 框架 
页 面 依 此 命名 为 8.3.1.html、8.3.2.html、8.3.3.html。 由 于 上 一 小 节 已 经 给 出 完整 的 HTML 
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代码 ， 这 里 只 给 出 主要 代码 。 代 码 如 下 。 
8.3.html 页 面 代码 如 下 : 
<frameset rows="100,200,100"> <!-- 将 窗口 分 为 100 像素 ，200 像素 ，100 像素 --> 
<frame src="8.3.1.html" /> <!-- 插入 框架 8.3.1.html --> 
<frame src="8.3.2.html" /> <!-- 插入 框架 8.3.2.html --> 


<frame src="8.3.3.html" /> <!-- 插入 框架 8.3.3.html --> 
</frameset> 


8.3.1.html 页 面 代码 如 下 : 


<body> 
上 边框 架 
</body> 


8.3.2.html 页 面 代 码 如 下 : 


<body> 
中 间 框架 
</body> 


8.3.3.html 页 面 代码 如 下 : 


<body> 


下 边框 架 
</body> 


效果 如 图 8.4 所 示 。 


6 CG 省 [加 file/W/FVbj/ 升 级 /示例 /第 作 童 /8.2.html 
上 边框 架 


中 间 框 架 


图 8.4 使 用 rows 属性 设置 框架 集 高 度 效果 图 


全 注意 : 框架 集中 的 框架 是 以 行 或 列 进行 排列 的 ， 只 能 选择 一 种 排列 方式 ， 因 此 cols 和 rows 
属性 不 能 同时 使 用 。 
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8.3.3 边框 集 边 框 粗 细 border 


在 <framesef> 标 签 里 ，border 属性 是 用 来 设置 边框 集中 框架 与 框架 之 间 的 边框 的 粗细 。 
其 语法 结构 如 下 : 


<frameset border="n"> <!-- 开 始 插入 框架 --> 
<frame src=" 框 架 连 接 的 页 面 的 URL " /> 
</frameset> <!-- 结 束 插入 框架 --> 


其 中 ,nm 是 用 来 设置 边框 的 粗细 的 。 在 没有 设置 的 情况 下 ， 默 认为 5 像素 。 

【示例 8.4】 下 面 是 使 用 border 属性 来 设置 边框 粗细 的 效果 。 这 里 引用 8.3.1.html、 
8.3.2.html、8.3.3.html 三 个 框架 来 进行 设置 ， 所 以 这 里 只 给 出 框架 集 页 面 8.4.html 的 代码 。 
代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
W3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 8.4</title> 

</head> 

<frameset rows="100,*,*" border="15"> 


<!-- 将 100 像素 以 外 的 窗口 平均 分 配 ， 边 框 为 15 个 像素 --> 


<frame src="8.3.1.html" /> <!-- 插入 框架 8.3.1.html --> 
<frame src="8.3.2.html" /> <!-- 插入 框架 8.3.2.html --> 
<frame src="8.3.3.html" /> <1== 着 入 框 第 8.3.3-.html 三 > 
</frameset> 
</html> 


效果 如 图 8.5 所 示 。 和 图 8.4 比较 ， 可 以 看 出 图 8.5 的 边框 明显 变 粗 。 
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图 8.5 使 用 border 属性 设置 边框 粗细 效果 图 
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8.3.4 设置 边框 颜色 bordercolor 


bordercolor 属性 用 来 设置 框架 集中 框架 与 框架 之 间 的 边框 颜色 。 其 语法 结构 如 下 : 


<frameset border=" 边 框 宽度 ”bordercolor=" 边 框 颜 色 "> “<!-- 开 始 插入 框架 --> 
<frame src=" 框 架 连 接 的 页 面 的 URL " /> 
</frameset> <!-- 结 束 插入 框架 --> 


bordercolor 属性 填写 的 颜色 格式 和 之 前 讲 过 的 背景 颜色 填写 的 格式 一 样 ， 这 里 就 不 再 
阐述 。 

【示例 8.5】 下 面 是 使 用 bordercolor 属性 来 设置 边框 颜色 的 具体 效果 。 这 里 会 引用 
8.2.1.html、8.2.2.html、8.2.3.html 三 个 框架 来 进行 设置 , 所 以 这 里 只 给 出 框架 集 页 面 8.5.html 
的 代码 。 代 码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
Ww3.0rg/TR/xhtml1/DTD/xhtmll-transitional .dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 8.5</title> 
</head> 
<frameset cols="100,200,100" border="10" bordercolor="#00ffff"> 
<!-- 将 窗口 分 为 100 像素 、200 像素 、100 像素 , 边框 宽度 为 10 像素 , 边框 颜色 为 蓝 色 --> 


<frame src="8.2.1.html" /> <!-- 插 入 框架 8.2.1.html --> 
<frame src="8.2.2.html" /> <!== 括 入 框架 8.2.2.html ==> 
<frame src="8.2.3.html" /> <!-- 插 入 框架 8.2.3.html --> 

</frameset> 

</html> 

效果 如 图 8.6 所 示 。 


图 8.6 ”使 用 bordercolor 属性 设置 边框 颜色 效果 图 
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8.3.5 设置 是 否 显示 边框 fameborder 


frameborder 属性 可 以 用 来 设置 是 否 显示 框架 集中 框架 与 框架 之 间 的 边框 。frameborder 
属性 有 两 个 值 : 1 和 0， 当 frameborder="1" 时 ， 表 示 显 示 边 框 ， 当 frameborder="0" 时 ， 表 
示 不 显示 边框 。 其 语法 结构 如 下 : 


<frameset frameborder="1/0"> <!-- 开 始 插入 框架 --> 
<frame src=" 框 架 连 接 的 页 面 的 URL " /> 
</frameset> <!-- 结 束 插入 框架 --> 


【示例 8.6】 下 面 是 使 用 frameborder 属性 来 设置 不 显示 边框 的 效果 。 这 里 会 引用 
8.2.1.html、8.2.2.html、8.2.3.html 这 三 个 框架 来 进行 设置 ， 所 以 这 里 只 给 出 框架 集 页 面 
8.6.html 的 代码 。 代 码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
w3 .org/TR/xhtm11/DTD/xhtm11-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 8.6</title> 
</head> 
<frameset cols="100,200,100" border="10" frameborder="0"> 
<!-- 将 窗口 分 为 100 像素 、200 像素 、100 像素 ， 边 框 为 10 像素 ， 边 框 不 显示 --> 


<frame src="8.2.1.html" /> <!-- 插 入 框架 8.2.1.html --> 
<frame src="8.2.2.html" /> <!-- 插 入 框架 8.2.2.html --> 
<frame src="8.2.3.html" /> <!-- 插 入 框架 8.2.3.html --> 
</frameset> 
</html> 


效果 如 图 8.7 所 示 ， 可 以 看 出 三 个 框架 之 间 没 有 边框 。 


GE? x = 了 
全 了 CG file:///F:/bj/ 升 级 /示例 /第 八 间 /8.6.html 家 入 


左边 框架 中 间 框 架 右边 框架 


图 8.7 使 用 frameborder 属性 显示 没有 框架 效果 图 
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8.3.6 ”设置 框架 间隔 framespacing 


framespacing 属性 用 来 设置 框架 集中 框架 与 框架 之 间 的 间隔 ， 也 就 是 框架 与 框架 之 间 
的 空白 距离 ， 其 语法 结构 如 下 : 


<frameset frameborder=" 间 隔 大 小 "> <!-- 开 始 插入 框架 --> 
<frame src=" 框 架 连 接 的 页 面 的 URL " /> 
</frameset> <!-- 结 束 插入 框架 --> 


需要 注意 的 是 ， 框 架 与 框架 之 间 的 间隔 不 宜 填 得 太 大 ， 太 大 的 话 ， 会 使 子 框架 与 子 框 
架 之 间 脱 离开 来 ， 破 坏 了 页 面 的 完整 。 

【示例 8.7】 下 面 是 使 用 framespacing 属性 显示 框架 之 间 间 隔 的 效果 。 为 了 是 效果 更 明 
显 ， 给 框架 集 里 的 三 个 框架 都 加 上 了 背景 颜色 。 这 三 个 框架 的 名 称 分 别 为 8.7.1.html、 
8.7.2.html、8.7.3.html。 框 架 集 的 名 称 为 8.7.html。 代 码 如 下 。 

8.7.html 页 面 代 码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
WwW3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.0org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 8.7</title> 

</head> 

<frameset cols="100,*,*" framespacing="10px"> 


<!-- 将 100 像素 以 外 的 窗口 平均 分 配 ， 设 置 框架 间隔 为 10 像素 --> 


<frame src="8.7.1.html" /> <!-- 插 入 框架 8.7.1.html --> 
<frame src="8.7.2.html" /> <!-- 揪 入 框架 8.7.2.html --> 
<frame src="8.7.3.html" /> <!-- 揪 入 框架 8.7.3.html --> 

</frameset> 

</html> 

8.7.1.html 页 面 代码 如 下 : 

<body bgcolor="#00ffff"> <!-- 设 置 框架 背景 色 为 蓝 色 --> 

左边 框架 

</body> 

8.7.2.html 页 面 代码 如 下 : 

<body bgcolor="#666699"> <!-- 设 置 框架 背景 色 为 紫色 --> 

中 间 框 架 

</body> 

8.7.3.html 页 面 代码 如 下 : 

<body bgcolor="#fffacd"> <! 一 -设置 框架 背景 色 为 黄色 --> 

右边 框架 

</body> 

效果 如 图 8.8 所 示 。 


» 20s 


全 全 EECOCECE 乱 才 987 x ] I 


文件 (久久 (E) 前 看 (V) 收 基 闪 (A) 工具 (T) 帮助 (H) 
左边 框架 


右边 框架 


戌 100% ~ 


\ = 二 


图 8.8 使 用 framespacing 属性 设置 框架 间隔 效果 图 


8.3.7 不 支持 框架 标签 <noframes> 


前 面 已 经 说 过 并 不 是 所 有 的 浏览 器 都 支持 框架 ， 当 浏览 器 不 支持 frame 框架 时 可 以 使 
用 <noframes> 标 签 。<noframes> 标 签 是 在 浏览 器 不 支持 frame 框架 时 ， 向 浏览 者 显示 一 些 
警告 信息 ， 以 警告 浏览 者 当前 浏览 器 不 支持 frame 框架 。<noframes> 标 签 里 面 需 要 嵌 套 着 
<body> 标 签 ， 其 语法 结构 如 下 : 


<frameset> <!-- 开 始 插入 框架 --> 
<frame src=" 框 架 连 接 的 页 面 的 URL " /> 
</frameset> <!-- 结 束 插入 框架 --> 
<noframes> <!-- 开 始 插入 非 支 持 框架 标签 -=-> 
<body> 警 告 内 容 </body> 
</noframes> <!-- 结 束 插入 非 支 持 框架 标签 -=-> 


其 中 , <body> 标 签 里 面 填写 的 内 容 , 可 以 是 文本 内 容 , 也 可 以 是 网 页 , 在 这 里 , <body> 
标签 就 是 网 页 中 的 <body> 内 容 主 体 。 

【示例 8.8】 下 面 是 使 用 <noframes> 标 签 来 设置 浏览 器 不 支持 框架 的 效果 。 由 于 
<noframes> 标 签 是 在 不 支持 的 浏览 器 里 才 产 生效 果 ， 现 在 主流 的 浏览 器 都 支持 框架 ， 所 以 
会 看 不 到 <noframes> 标 签 里 显示 的 内 容 。 这 里 引用 8.3.1.html、8.3.2.htm、8.3.3.htmll 三 个 
框架 来 进行 设置 ， 所 以 只 给 出 框架 集 页 面 8.8.html 的 代码 。 代 码 如 下 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 

w3.0org/TR/xhtmll1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 


<title> 示 例 8.8</title> 
</head> 


<frameset rows="100,*,*"> <!-- 将 100 像素 以 外 的 窗口 平均 分 配 --> 
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xErame sre="9.3.1:html” /> <!== 搬入 地 框 架 8.3.1.htnml ==> 
<frame src="8.3.2.html" /> <!-- 插入 子 框架 8.3.2.html --> 
<frame src="8.3.3.html" /> <!-- 插入 子 框架 8.3.3.html --> 
</frameset> 
<noframes> <!-- 不 支持 框架 时 显示 <body> 标 签 里 的 内 容 --> 
<body> 此 浏览 器 不 支持 框架 </body> 
</noframes> 
</html> 


效果 如 图 8.9 所 示 。 


D 8.8 
》 CG 省 昌 file:y///F:/bj/ 示 例 /第 八 宣 /8.8. html _ 


上 边框 架 


图 8.9 使 用 <noframes> 标 签 显示 框架 效果 图 
外 注意 : <body> 标 签 需要 加 入 <noftames> 标 签 ， 才 可 以 和 <framese 人 > 标签 同时 使 用 。 在 没 


有 写 <noframes> 标 签 的 框架 页 面 里 ,使 用 Dreamweaver 编辑 器 打开 页 面 ， 会 自动 
为 页 面 添加 <noframes> 标 签 。 


8.4 框架 <frame> 


在 上 一 节 已 经 讲 过 框架 被 包含 在 框架 集 里 。 可 以 这 样 说， 框架 集 是 由 框架 组 成 的 ， 框 
架 集 中 显示 的 内 容 都 是 由 框架 的 链接 页 面 提供 的 。<frame> 标 签 就 是 用 来 定义 框架 的 。 本 节 
将 详细 讲解 <frame> 标 签 里 的 各 个 属性 的 设置 。 
8.4.1 设置 框架 边框 不 可 调节 noresize 

在 前 面 的 例子 中 ， 大 家 可 以 发 现 ， 当 鼠标 放 在 框架 页 面 的 边框 上 时 ， 可 以 调节 边框 的 
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大 小 。 但 有 时 我 们 并 不 希望 框架 大 小 可 以 调节 。 这 时 可 以 使 用 noresize 属性 来 进行 设置 。 
noresize 属性 用 来 设置 框架 边框 为 不 可 调节 状态 。 由 于 调节 的 是 框架 而 不 是 框架 集 ， 所 以 
noresize 属性 要 放 在 框架 里 面 使 用 。noresize 属性 只 有 一 个 属性 值 ， 其 语法 结构 如 下 : 


<frameset> <!-- 开 始 插入 框架 --> 
<frame src=" 框 架 连接 的 页 面 的 URL"” noresize="noresize" /> 
<!-- 设 置 子 框 架 调 节 --> 
</frameset> <!-- 结 束 插入 框架 --> 


noresize="noresize" 表 示 边 框 之 间 不 能 进行 调节 , 这 是 固定 格式 。 在 没有 设置 的 情况 下 
鼠标 放 在 框架 页 面 的 边框 上 , 可 以 进行 调节 。 当 设置 了 之 后 ,鼠标 放 在 框架 页 面 的 边框 上 ， 
就 不 可 以 进行 调节 。 

【示例 8.9】 下 面 是 使 用 noresize 属性 来 设置 框架 边框 不 能 调节 的 效果 。 这 里 会 引用 
8.3.1.html、8.3.2.html 这 两 个 框架 来 进行 设置 ， 这 里 只 给 出 框架 集 页 面 8.9.html 的 代码 。 代 
人 码 如 下 : 


<1DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
w3 .org/TR/xhtm11/DTD/xhtml11-transitional.dtd"> 
<html xmlns="http://www.w3.0org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 8.9</title> 
</head> 
<frameset rows="100,*"> <!-- 将 100 像素 以 外 的 窗口 自由 扩展 --> 
<frame src="8.3.1.html" noresize="noresize"/> 
<!-- 插 入 框架 8.3.1.html， 设 置 框架 不 能 调节 --> 
<frame src="8.3.2.html" /><!-- 插 入 子 框架 8.3.2.html ， 不 设置 则 框架 可 以 调节 --> 
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</frameset> 

<noframes> <!-- 不 支持 框架 时 显示 <bodqy> 中 的 内 容 --> 
<body> 此 浏览 器 不 支持 框架 </body> 

</noframes> 

</html> 


这 里 为 了 效果 明显 ， 给 出 了 两 个 图 ， 图 8.10 是 框架 边框 可 以 调节 的 效果 ， 图 8.11 是 
框架 边框 不 可 以 调节 的 效果 。 


J © awes x 
全 言 C 前 @file///FVbj/ 示 例 /第 八 章 /8.9.html 
上 边框 架 


中 间 框 架 


图 8.10 ”使 用 noresize 属性 设置 框架 调节 效果 图 
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由 上 面 两 个 图 可 以 看 出 ， 当 框架 可 以 调节 的 时 候 ， 把 鼠标 放 在 框架 边 枉 上， 鼠标 就 会 
变 成 调节 边框 的 样子 ， 如 图 8.11 所 示 。 
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全 六 C 在 file/FVbj/ 示 例 /第 作 章 /8.9.html 
上 边框 架 


图 8.11 没有 使 用 noresize 属性 设置 框架 可 以 调节 效果 图 


8.4.2 ”框架 集 舱 套 


在 一 个 框架 集 里 ， 框 架 只 能 选择 行 或 列 一 种 排列 方式 。 但 有 时 我 们 想 使 页 面 既 有 横向 
框架 又 有 纵向 框架 ， 这 时 可 以 使 用 框架 集 嵌 套 来 实现 。 框 架 集 找 套 ， 就 是 在 框架 集 标签 中 
包含 框架 集 标 签 。 其 语法 结构 如 下 


<frameset> <!-- 开 始 插入 框架 --> 
<frame src=" 框 架 连 接 的 页 面 的 URL "> 
<frameset> <!-- 开 始 插 入 嵌 套 框架 --> 


<frame src=" 框 架 连 接 的 页 面 的 URL "> 
<frame src=" 框 架 连 接 的 页 面 的 URL "> 
</frameset> <! 一 -结束 插入 嵌 套 框架 --> 
</frameset> <!-- 结 束 插入 框架 --> 


其 中 ， 框 架 集 里 起 码 要 有 一 个 框架 ， 然 后 再 柑 套 一 个 框架 集 ， 要 不 然 嵌 套 就 变 得 毫 无 
意义 。 在 被 嵌 套 在 里 面 的 框架 集 里 起 码 要 有 两 个 框架 , 要 不 然 此 框架 集 也 将 变 得 毫 无 意义 。 

【示例 8.10】 下 面 是 使 用 框架 集 柑 套 设置 框架 的 效果 。 这 里 使 用 的 是 一 个 左上 下 的 结 
构 框 架 。 先 在 框架 集 里 插入 一 个 左边 框架 ， 然 后 嵌 套 一 个 框架 集 ， 在 嵌 套 的 框架 集 里 再 插 
入 上 下 两 个 框架 。 使 用 的 子 框架 页 面 为 8.2.1.html、8.3.1.html、8.3.2.html， 这 里 只 给 出 框 
架 集 页 面 8.10.html 的 代码 。 代 码 如 下 : 


<!DOCTYPE html PUBLIC "~-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
Ww3.0org/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 8.10</title> 

</head> 
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<frameset cols="100,*"> <!-- 将 100 像素 以 外 的 窗口 自由 扩展 --> 
<Erame SEE=wB 2 1 Htnl™ /> <!1=- 持 入 子 框架 8.2.1.html ==> 
<frameset rows="100,*" > <!-- 将 100 像素 以 外 的 窗口 自由 扩展 --> 
<frame src="8.3.1.html" /> <!-- 插 入 子 框架 8-3-1.html --> 
<frame src="8.3.2.html" /> <!-- 插 入 子 框架 8.3.2.html --> 
</frameset> 
</frameset> 
效果 如 图 8.12 所 示 。 
9 
WE x 
全 全 C 得 |file/WFVbj/ 示 例 /第 人 童 /8l10hm 人 安 六 
左边 框架 | 上 边框 架 
中 间 框 架 


图 8.12 ”使 用 窗口 嵌 套 设置 框架 效果 图 


全 技巧 :一般 使 用 窗口 谋 套 ， 嵌 套 的 框架 集 和 被 谋 套 的 框架 集 所 使 用 的 分 割 种 类 是 不 同 的 。 


8.5 框架 链接 


显然 在 一 个 框架 中 显示 大 量 的 不 相关 的 内 容 ， 查 找 起 来 是 不 方便 的 。 我 们 可 以 使 用 超 
链接 来 更 换 框架 的 内 容 ， 而 不 改变 框架 结构 。 可 以 把 超 链接 的 “ 源 端 ” 和 “目标 端 ” 分 别 
放 在 两 个 框架 中 ， 单 击 “ 源 端 ” 超 链接 ，“ 目 标 端 ”HTML 页 面 就 在 指定 的 框架 内 显示 出 
来 。 要 进行 超 链接 ， 必 须要 先 用 name 属性 对 框架 进行 命名 ， 再 设置 链接 内 容 中 的 target 
属性 ， 把 “ 源 端 ” 和 “目标 端 ” 绑 定 在 一 起 。 其 语法 结构 如 下 。 

框架 集 语 法 结构 如 下 : 

<frameset> <!-- 开 始 插入 框架 --> 


<frame src=" 框 架 连 接 的 页 面 的 URL " name="n" /> 
</frameset> <!-- 结 束 插入 框架 --> 


链接 页 面 语法 形式 如 下 : 

<a href="#" target="n"> </a> 

其 中 ,nm 是 用 来 填写 框架 页 面 的 名 字 的 ，n 命名 要 遵守 命名 规则 。target 属性 里 的 n 要 
和 name 属性 里 的 n 命 名 一 致 ， 才 可 以 产生 效果 。# 是 用 来 填写 所 要 链接 到 的 网 页 的 地 址 。 

【示例 8.11】 下 面 是 使 用 name 属性 和 target 属性 来 设置 框架 超 链 接 的 效果 。 这 里 使 用 
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的 是 一 个 左右 的 结构 框架 ， 使 用 的 框架 页 面 命名 为 8.11.1.html、8.11.2.html, 这 里 给 出 的 框 
架 集 页 面 的 代码 命名 为 8.11.html。 
8.11.html 页 面 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
Ww3.0org/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 8.11</title> 
</head> 
<frameset cols="*,*"> <!-- 将 窗口 按 等 份 ， 分 为 两 等 份 --> 
<frame src="8.11.1.html" name="pagel" /> 
<!==- 搬 入 子 框架 8.11.1.html ==> 
<frame src="8.11.2.html" name="page2" /> 
<!-- 插 入 子 框架 8.11.2.html --> 


</frameset> 
<noframes> <!-- 不 支持 框架 时 显示 下 面 内 容 --> 
<body> 此 浏览 器 不 支持 框架 </body> 
</noframes> 
</html> 
8.11.1.html 页 面 代码 如 下 : 
<body> 
<a href="http://www.sohu.com" target="page2"> 链 接 到 搜狐 网 站 </a> 
< 上 = 设置 链接 --> 
</body> 
8.11.2.html 页 面 代码 如 下 : 
<body> 
<a href="http://www.baidu.com" target="page1l"> 链 接 到 百度 网 站 </a> 
<!-- 设 置 链接 --> 
</body> 
效果 如 图 8.13 一 图 8.15 所 示 。 
Eee [一 一 | 
全 C 本 加 全 eVWFVbj/ 示 开征 八 本 /8.11html 羡 久 
链接 到 搜狐 网 站 链接 到 百度 网 站 


图 8.13 ”使 用 框架 超 链接 链接 前 效果 
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注册 邮件 博客 相册 


1 信用 I 人 处 才 大公 


新 闻 图 片 评论 我 说 两 句 军事 公益 体育 NBA 中 超 S 
天 气 男人 女人 美容 母 呈 健康 绿色 吃喝 促 : 


4 全 CG 省 @fileW/FVbj/ 示 例 /第 作 覃 /8.11.html 
搜索 设置 | 登录 注册 


@0 
Baid 百度 


新 闻 网 页 贴吧 知道 音乐 图 片 视频 地 图 


图 8.15 ”使 用 框架 超 链接 单 击 右边 链接 后 的 效果 


全 说 明 : 这 种 框架 的 使 用 ， 大 多 数 都 是 体现 在 后 台 的 操作 里 。 
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8.6 谈 入 式 框 架 <iframe> 


嵌入 式 框架 是 在 网 页 中 柑 入 一 个 框架 窗口 ， 把 一 个 网 页 显示 在 框架 之 中 ， 这 种 方法 最 
常用 于 制作 在 多 个 网 页 中 都 有 的 模块 ， 如 广告 、 用 户 协 议 等 。 当 需要 更 改 广告 时 ， 只 需要 
更 改 框架 中 嵌入 的 网 页 文件 即 可 ， 而 不 需要 修改 主 文件 。 嵌 入 式 框架 可 以 通过 <iframe> 标 
签 来 进行 设置 。<iframe> 标 签 是 放 在 <body> 标 签 里 面 的 ， 其 语法 结构 如 下 : 

<iframe src=" 框 架 窗口 连接 的 页 面 的 URL "> </iframe><!-- 设 置 嵌 入 式 框架 --> 


<iframe> 标 签 拥 有 前 面 所 说 的 <framese 人 标签 和 <frame> 标 签 的 属性 , 包括 : src、name、 
height、width、frameborder。 这 些 的 语法 、 用 法 和 <frameset> 标 签 、<frame> 标 签 里 的 语法 、 
用 法 是 一 样 的 。 在 这 些 属性 的 基础 上 ， 添 加 了 scrolling 属性 和 allowtransparency 属性 。 本 
节 将 详细 讲述 scrolling 属性 和 allowtransparency 属性 的 用 法 。 


8.6.1 滚动 条 scrolling 


scrolling 属性 是 用 来 设置 框架 窗口 是 否 可 以 添加 滚动 条 来 滚动 显示 内 容 。scrolling 属 
性 有 两 个 属性 值 : yes 和 no。 其 语法 结构 如 下 : 

<iframe src=" 框 架 窗口 连接 的 页 面 的 URL " scrolling="yes/no"> </iframe> 

<!-- 设 置 框架 窗口 的 滚动 条 --> 

其 中 ， 当 scrolling="yes" 时 ， 表 示 浮 动 窗口 根据 需要 显示 滚动 条 ; 当 scrolling="no" 时 ， 
表示 浮动 窗口 不 显示 滚动 条 。 

【示例 8.12】 下 面 是 使 用 scrolling 属性 来 设置 是 否 显示 滚动 条 的 效果 。 为 了 使 效果 更 
明显 ， 这 里 在 页 面 里 插入 了 两 个 相同 的 框架 窗口 的 页 面 ， 一 个 显示 滚动 条 ， 一 个 不 显示 滚 
动 条 。 这 里 给 出 的 框架 窗口 的 代码 命名 为 8.12.html， 框 架 窗口 内 容 的 页 面 命名 为 
8.12.1.html。 代 码 如 下 。 

8.12.html 页 面 代码 如 下 : 

<iframe src="8.12.1.html" width="200px" height="150px" scrolling="yes"> 


</iframe><br /><br /> <br/> <!-- 设 置 浮动 窗口 显示 滚动 条 --> 
<iframe src="8.12.1.html" width="200px" height="150px" scrolling="no"> 
</iframe> 


<!-- 设 置 浮动 窗口 不 显示 滚动 条 --> 
8.12.1.html 页 面 代码 如 下 : 


这 是 框架 窗口 <br/> 
这 是 框架 窗口 <br/> 
这 是 框架 窗口 <br/> 
这 是 框架 窗口 <br/> 
这 是 框架 窗口 <br/> 
这 是 框架 窗口 <br/> 
这 是 框架 窗口 <br/> 


» 2 


效果 如 图 8.16 所 示 。 
eel | 
J © ms.12 
和 访 GC 绅 filexy//F:/bj/ 示 例 /第 八 章 /8.12.html 安 入 
这 是 框架 窗口 向 
这 是 框架 窗口 带 滚 动 条 的 
这 是 框架 窗口 框架 窗口 
这 是 框架 窗口 
这 是 框架 窗口 = 
这 是 框架 窗口 
这 是 框架 窗口 不 带 滚动 条 
这 是 框架 窗口 的 框架 窗口 
这 是 框架 窗口 
这 是 框架 窗口 


图 8.16 使 用 scrolling 属性 设置 框架 窗口 是 否 显示 滚动 条 效果 图 


名 注意 : 谋 套 在 frameset 里 的 iframe 必须 放 在 <body> 标 签 中 ， 不 说 套 在 frameset 里 的 
iframe 可 以 随意 使 用 。 


8.6.2 ”框架 窗口 透明 设置 allowtransparency 


allowtransparency 属性 可 以 设置 框架 窗口 在 页 面 里 显示 为 透明 状态 ， 也 就 是 页 面 上 的 
背景 可 以 穿 透 框架 窗口 。allowtransparency 属性 只 有 一 个 属性 值 tue。 其 语法 结构 如 下 : 


<iframe src=" 框 架 窗口 连接 的 页 面 的 URL " allowtransparency="true"> </iframe> 
<!-- 设 置 透明 框架 窗口 --> 


其 中 ，allowtransparency="true" 是 固定 格式 ， 表 示 设 置 透明 框架 窗口 。 

【示例 8.13】 下 面 是 使 用 allowtransparency 属性 设置 透明 框架 窗口 的 效果 。 这 里 使 用 的 
框架 窗口 内 容 的 页 面 代码 为 上 小 节 中 的 8.12.html， 框架 窗口 的 代码 命名 为 8.13.html。 为 了 
使 效果 更 明显 ， 在 页 面 里 添加 了 蓝 色 的 背景 。8.13.html 代码 如 下 : 


<body bgcolor="#00ffff"> 
<iframe src="8.12.1.html" width="200px" height="150px" allowtransparency= 


"true"> </iframe> <!-- 设 置 透明 框架 窗口 --> 
</body> 


效果 如 图 8.17 所 示 。 
外 技巧 : 在 使 用 中 ， 浮 动 窗口 使 用 的 频率 要 比 框 架 使 用 的 频率 高 . 
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图 8.17 使 用 allowtransparency 属性 设置 透明 框架 窗口 效果 图 


87 本 章 小 结 


本 章 主要 学 习 了 框架 ， 它 可 以 使 网 页 架构 更 加 合理 。 当 网 页 内 容 比较 少 的 时 候 ， 使 用 
框架 将 会 使 网 页 布局 看 起 来 更 加 丰富 合理 。 详 细 介绍 了 框架 和 框架 集 的 属性 的 用 法 以 及 嵌 
入 式 框 架 的 设置 。 下 一 章 我 们 将 讲解 列表 元 素 的 使 用 。 


8.8 本 章 习 题 


【习题 8-1】 在 网 页 中 创建 一 个 简单 的 上 下 型 结构 的 框架 ， 上 下 框架 背景 颜色 分 别 为 黄 
色 和 蓝 色 ， 设置 边 框 宽度 为 Spx， 边 框 颜色 为 红色 ， 效 果 如 图 8.18 所 示 。 


Os-Lhtml x TE 
二 3 C 组 加 fileV//FVbj/ 升 级 /习题 /第 8 章 /8-1.html 家 入 
上 边框 架 


图 8.18 设置 框架 效果 图 
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【习题 8-2】 在 网 页 中 创建 一 个 上 左右 结构 的 嵌 套 框架 ， 先 在 框架 集 里 插入 一 个 上 边框 
架 ， 然 后 嵌 套 一 个 框架 集 ， 在 嵌 套 的 框架 集 里 再 插入 左右 两 个 框架 ， 效 果 如 图 8.19 所 示 。 


本 wy 


@ 未 Ws10 x 《和 
后 了 C 和 加 file/W/F/bj/ 升 级 /习题 /第 8 童 /8-2.html 
上 边框 架 


左边 框架 右边 框架 


图 8.19 设置 嵌 套 框架 效果 图 
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列表 在 网 页 布局 和 排版 方面 都 具有 很 强大 的 功能 。 使 用 列表 可 以 使 文本 图 像 内 容 像 使 
用 了 表格 一 样 整 齐 排列 ， 非 常 方便 浏览 者 浏览 。 不 同 的 列表 标签 可 以 使 文本 图 像 内容 按 不 
同 的 方式 进行 排序 。 因 此 列表 在 使 用 频率 上 也 很 高 ， 仅 次 于 表格 的 使 用 。 本 章 我 们 就 来 详 
细 讲 解 列表 元 素 的 几 种 排序 方法 。 


9.1 无 序列 表 元 素 <ul> 


无 序列 表 是 相对 于 有 序列 表 而 言 的 ， 就 是 指 列表 项 在 进行 排序 的 时 候 ， 在 列表 项 前 不 
添加 列表 序号 ， 而 是 以 其 他 图 案 来 进行 标记 的 一 种 列表 。 无 序列 表 是 使 用 最 广泛 的 一 种 列 
表 元 素 。 本 节 将 对 无 序列 表 进 行 详细 说 明 。 


9.1.1 无 序列 表 结 构 


<ul> 标 签 用 来 定义 无 序列 表 ，<li> 标 签 用 来 定义 无 序列 表 中 的 每 个 列表 项 。 这 两 个 标 
签 都 是 双 标 签 ， 有 起 始 标签 和 闭合 标签 。 其 语法 结构 如 下 : 


<ul> <!-- 无 序列 表 开始 --> 
<1i> 列 表 项 1</1i> 
<1i> 列 表 项 2</1i> 
< /> 
</ul> <!-- 无 序列 表 结 束 --> 
其 中 ，<li> 标 签 里 面 填 写 的 是 一 行 中 要 出 现 的 列表 项 ， 需 要 出 现 多 少 个 列表 项 ， 只 需 
要 增加 多 少 个 <li> 标 签 就 可 以 了 。 <ul> 标 签 默认 的 使 用 图 案 是 粗 体 圆 点 (典型 的 小 黑 圆 圈 ) 。 
【示例 9.1】 下 面 是 使 用 无 序列 表 来 显示 页 面 内容 的 效果 ， 代 码 如 下 : 
<ul> <!-- 无 序列 表 开始 --> 
<1i> 新 闻 标 题 1</1i> 
<1i> 新 闻 标 题 2</1i> 
<1i> 新 闻 标题 3</1i> 
</ul> <!-- 无 序列 表 结束 --> 
效果 如 图 9.1 所 示 。 


9.1.2 无 序列 表 样 式 


列表 样式 是 指 无 序列 表 排列 时 列表 项 前 面 用 的 图 案 的 样式 。 无 序列 表 样 式 分 为 3 种 : 


第 9 章 列表 元 素 


将 
Gr 


加 样式 、 空 心 加 样式 和 小 方 尖 样式 。 通过。 人 下 
type 属性 可 以 设置 不 同类 型 的 排序 图 案 。 i 


1. 实心 圆 样 式 disc 。 新 闻 标题 1 
。 新闻 标题 2 
实心 圆 样 式 可 以 通过 type="disc" 来 设置 。 。 新 闻 标 题 3 


type 属性 是 放 在 <ul> 标 签 里 面 的 。 其 语法 结构 
如 下 : 
<ul type="disc"> 
<!-- 无 序列 表 开始 ， 设 置 实心 圆 样式 _ 
二 这 图 9.1 使 用 无 序列 表 来 显示 页 面 内 容 的 效果 图 
<1i> 列 表 项 </1i> 
</ul> ”<!-- 无 序列 表 结束 --> 


于 默认 的 排序 图 案 的 样式 就 是 实心 圆 样式 ， 如 图 9.1 所 示 ， 所 以 这 里 将 不 青 举 例 


说 明 。 
且 技 巧 : 由 于 type="disc" 的 实心 圆 样式 是 默认 的 样式 ， 所 以 在 使 用 中 ， 通 常 都 是 不 用 特意 
写 出 属性 值 的 。 
2. 空心 圆 样式 circle 


空心 圆 的 样式 可 以 通过 type="circle" 来 设置 。 其 语法 结构 如 下 : 
<ul type="circle"> <!-- 无 序列 表 开始 ， 设 置 空心 圆 样式 --> 


<1i> 列 表 项 </1i> 

</ul> <!-- 无 序列 表 结 束 --> 

【示例 9.2】 下 面 是 使 用 type="circle" 来 设置 空心 圆 样式 的 效果 ， 代 码 如 下 : 
<ul type="circle"> <! 一 -无 序列 表 开 始 ， 设 置 空心 圆 样式 --> 


<1i> 标 题 1</1i> 
<1i> 标 题 2</1i> 
<1i> 标 题 3</1i> 
</ul> <!-- 无 序列 表 结 束 --> 


效果 如 图 9.2 所 示 。 
3. 小 方块 样式 square 
小 方块 的 样式 可 以 通过 type="square" 来 设置 。 其 语法 结构 如 下 : 


<ul type="square"> <!-- 无 序列 表 开 始 ， 设 置 小 方块 样式 --> 
<1i> 列 表 项 </1i> 

</ul> <!-- 无 序列 表 结束 --> 

【示例 9.3】 下 面 是 使 用 type="square" 来 设置 小 方块 样式 的 效果 ， 代 码 如 下 : 
<ul type="square"> <!-- 无 序列 表 开 始 ， 设 置 小 方块 样式 --> 


<1i> 标 题 1</1i> 
<1i> 标 题 2</1i> 
<1i> 标 题 3</1i> 
</ul> <! 一 -无 序列 表 结 束 --> 


号 
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效果 如 图 9.3 所 示 。 
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。 标题 3 


。 标题 1 
= 标题 2 
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图 9.2 使 用 type="circle" 来 设置 空心 圆 样式 的 效果 图 图 9.3 ”使 用 type="square" 来 设置 小 方块 样式 的 效果 图 


外 注意 : 使 用 列表 时 ， 要 注意 列表 项 不 可 以 写 在 <ul> 标 签 和 <li> 标 签 中 间 的 位 置 ， 这样 是 
不 符合 语法 规范 的 。 


9.2 有 序列 表 元 素 <ol> 


有 序列 表 ， 区 别 于 无 序列 表 ， 是 指 列表 项 在 进行 排序 的 时 候 ， 使 用 编号 进行 排序 ， 而 
不 是 使 用 图 像 排 序 。 有 序列 表 中 的 列表 项 前 都 用 数字 或 者 字母 来 表示 顺序 ， 如 1、2、3 或 
者 a、b、c 等 。 本 节 来 讲解 有 序列 表 的 使 用 。 


9.2.1 有 序列 表 结 构 


<ol> 标 签 用 来 定义 有 序列 表 ，<li> 标 签 用 来 定义 有 序列 表 中 的 每 个 列表 项 。 这 两 个 标 
签 也 都 是 双 标签 ， 有 起 始 标签 和 闭合 标签 。 其 语法 结构 如 下 : 


<ol> <!-- 有 序列 表 开始 --> 
<1i> 列 表 项 1</1i> 

<1i> 列 表 项 2</1i> 

SL < /LE 

</ol> <!-- 有 序列 表 结 束 --> 


其 中 ，<li> 标 签 里 面 填写 的 是 一 行 中 要 出 现 的 列表 项 ， 需 要 出 现 多 少 个 列表 项 ， 只 需 
要 增加 多 少 个 <li> 标 签 就 可 以 了 。<ol> 标 签 默认 使 用 的 是 数字 排序 。 
【示例 9.4】 下 面 是 使 用 有 序列 表 来 设置 列表 项 的 效果 ， 代 码 如 下 : 
<ol> <!-- 有 序列 表 开始 --> 
<1i> 标 题 1</1i> 
<1i> 标 题 2</1i> 
<1i> 标 题 3</1i> 
</ol> <!-- 有 序列 表 结束 --> 


效果 如 图 9.4 所 示 。 
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9.2.2 ”有 序列 表 样 式 9 
全 了 CG 本 昌 file///F:/bj/ 示 例 / 第 窑 外 
和 无 序列 表 样式 一 样 ， 有 序列 表 的 列表 项 前 。 标题 1 
面 的 标号 也 有 不 同 的 样式 。 有 序列 表 样式 分 为 5 . 标题 2 


种 : 


大 写 罗马 数字 标号 、 小 写 罗马 数字 标号 。 同 样 通 
过 type 属性 来 设置 不 同类 型 的 排序 标号 。 


. 标题 3 


数字 标号 、 大 写字 母 标号 、 小 写字 母 标号 、 


1. 数字 标号 样式 图 9.4 使 用 有 序列 表 来 设置 列表 项 的 效果 图 
使 用 type="1" 可 以 设置 有 序列 表 中 列表 项 前 面 的 标号 为 数字 排序 。 有 序列 表 的 type 属 


性 和 无 序列 表 的 type 属性 的 语法 是 一 样 的 。 其 语法 结构 如 下 : 


<ol type="1"> <!-- 有 序列 表 开始 ， 设 置 数字 标号 样式 --> 
<1i> 列 表 项 </1i> 
</ol> <!-- 有 序列 表 结 束 --> 


其 中 ，type="1" 是 固定 格式 ， 不 能 随意 改动 。 数 字 标号 是 默认 的 排序 标号 ， 如 图 9.4 所 
这 里 不 再 举例 说 明 。 


2. 大 写字 母 标号 样式 
使 用 type="A" 可 以 设置 有 序列 表 中 列表 项 前 面 用 的 标号 为 大 写字 母 排 序 。 其 语法 结构 


如 下 : 


<ol type="A"> <!-- 有 序列 表 开始 ， 设 置 大 写字 母 标号 样式 --> 
<1i> 列 表 项 </1i> 
</ol> <!-- 有 序列 表 结 束 --> 


其 中 ，type="A" 是 固定 格式 ， 不 能 随意 改动 。 
【示例 9.5】 下 面 是 使 用 type="A" 来 设置 大 写字 母 标 号 样式 的 效果 ， 代 码 如 下 : 
<ol type="A"> <!-- 有 序列 表 开 始 ， 设 置 大 写字 母 标号 样式 --> 
<1i> 标 题 1</1i> 
<1i> 标 题 2</1i> 
<1i> 标 题 3</1i> 
</ol> <!-- 有 序列 表 结束 --> 


效果 如 图 9.5 所 示 。 


© ns 二 w 
二 了 CG 前 昌 filey//Fbj/ 示 例 第 窑 入 
A.、 标题 1 


B 标题 2 
C， 标题 3 


图 9.5 使 用 type="A" 来 设置 大 写字 母 标 号 样式 的 效果 图 
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全 注意 : type-"A" 为 固定 格式 ， 当 属性 值 为 其 他 非特 定 字母 ， 浏 览 器 将 无 法 读 取 其 他 非特 
定 的 字母 格式 。 
3. 小 写字 母 标 号 样式 


使 用 type="a" 可 以 来 设置 有 序列 表 中 列表 项 前 面 用 的 标号 为 小 写字 母 排序 。 其 语法 结 
构 如 下 : 


<ol type="a"> <!-- 有 序列 表 开始 ， 设 置 小 写字 母 标号 样式 --> 
<1i> 列 表 项 </1i> 
</ol> <!-- 有 序列 表 结束 --> 


其 中 ，type="a" 是 固定 格式 来 的 ， 不 能 随意 改动 。 
【示例 9.6】 下 面 是 使 用 type="a" 来 设置 小 写字 母 标 号 的 效果 ， 代 码 如 下 : 
<ol type="a"> <!-- 有 序列 表 开 始 ， 设 置 小 写字 母 标号 样式 --> 
<1i> 标 题 1</1i> 
<1i> 标 题 2</1i> 


<1i> 标 题 3</1i> 
</ol> <!-- 有 序列 表 结 束 --> 


效果 如 图 9.6 所 示 。 


和 会 C 从 filey//F:/bj/ 示 例 | 第 窑 ' 久 


a.、 标题 1 
b. 标题 2 
c。 标题 3 


图 9.6 使 用 type="a" 来 设置 小 写字 母 标号 的 效果 图 


4. 大 写 罗 马 数 字 标号 样式 


使 用 type="I" 可 以 设置 有 序列 表 中 列表 项 前 面 用 的 标号 为 大 写 罗马 数字 排序 。 其 语法 
结构 如 下 : 


<ol type="I"> <!-- 有 序列 表 开 始 ， 设 置 大 写 罗 马 数字 标号 样式 --> 
<1i> 列 表 项 </1i> 
</ol> <!-- 有 序列 表 结束 --> 


其 中 ，type="T" 是 固定 格式 来 的 ， 不 能 随意 改动 。 
【示例 9.7】 下 面 是 使 用 type="I" 来 设置 大 写 罗马 数字 标号 的 效果 ， 代 码 如 下 : 
<ol type="I"> <!-- 有 序列 表 开 始 ， 设 置 大 写 罗 马 数字 标号 样式 --> 
<1i> 标 题 1</1i> 
<1i> 标 题 2</1i> 


<1i> 标 题 3</1i> 
</ol> <!-- 有 序列 表 结束 --> 


Gs 
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效果 如 图 9.7 所 示 。 
5. 小 写 罗 马 数 字 标 号 样式 


使 用 type="i" 可 以 来 设置 有 序列 表 中 列表 项 前 面 用 的 标号 为 小 写 罗马 数字 排序 。 其 语 
法 结构 如 下 : 


Re <!-- 有 序列 表 开始 ， 设 置 小 写 罗马 数字 标号 样式 --> 
<1i> 列 表 项 </1i> 
</ol> <!-- 有 序列 表 结 束 --> 


其 中 ，type="i" 是 固定 格式 来 的 ， 不 能 随意 改动 。 
【示例 9.8】 下 面 是 使 用 type="i" 来 设置 小 写 罗马 数字 标号 的 效果 ， 代 码 如 下 : 
<ol type="i"> <!-- 有 序列 表 开始 ， 设 置 小 写 罗 马 数字 标号 样式 --> 
<1i> 标 题 1</1i> 
<1i> 标 题 2</1i> 
<1i> 标 题 3</1i> 


</ol> <!-- 有 序列 表 结 束 --> 
效果 如 图 9.8 所 示 。 
7 @ " J © % 
后 访 C 省 @file///FVbj/ 示 例 /第 家 久 全  C 省 加 file/WFVbj/ 示 例 /第 :家 | 以 
I.， 标题 1 i.。 标题 1 
II 标题 2 ii 标题 2 
III. 标题 3 iii.。 标题 3 


图 9.7 使 用 type="T" 来 设置 大 写 罗马 数字 标号 的 效果 图 图 9.8 ”使 用 type="i" 来 设置 小 写 罗马 数字 标 
号 的 效果 图 


外 注意 : 使 用 有 序列 表 ， 不 可 以 更 改 属性 值 的 固定 格式 ， 否 则 会 被 视 为 无 效 属性 值 。 
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前 面 讲 的 都 是 在 一 个 列表 的 情况 下 进行 排序 ， 但 有 时 候 文 本 图 像 内 容 变 得 复杂 ， 使 用 
一 个 列表 是 不 够 的 ， 这 时 候 就 需要 将 列表 进行 嵌 套 。 嵌 套 列表 就 是 指 在 列表 中 再 嵌 套 一 个 
列表 ， 来 将 复杂 的 文本 图 像 内 容 进行 排序 。 其 语法 结构 如 下 : 


<ul> <!-- 无 序列 表 开始 --> 
< 
<ol> <!-- 被 嵌 套 的 有 序列 表 开 始 --> 
<1i> 列 表 项 </1i> 
</ol> <! 一 被 嵌 套 的 有 序列 表 结 束 --> 
</1i> 
</ul> <! 一 无 序列 表 结 束 --> 
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<ol> <!-- 有 序列 表 开 始 --> 
让 
<ul> <!-- 被 嵌 套 的 无 序列 表 开始 --> 
<1i> 列 表 项 </1i> 
</ul> <! 一 -被 嵌 套 的 无 序列 表 结 束 ---> 
A 
</ol> <!-- 有 序列 表 结 束 --> 


可 以 看 到 ， 这 里 给 出 的 是 无 序列 表 嵌 套 有 序列 表 和 有 序列 表 典 套 无 序列 表 的 语法 形 
式 。 其 中 ， 被 柑 套 的 列表 必须 是 一 个 完整 的 列表 格式 ， 列 表 里 的 语法 、 用 法 和 上 一 节 讲 述 
的 列表 的 内 容 一 样 。 被 内 套 的 无 序列 表 <ul> 标 签 默认 的 使 用 图 案 是 空心 圆 样式 ， 被 撕 套 的 
有 序列 表 <ul> 标 签 默认 排序 使 用 数字 排序 。 

【示例 9.9】 下 面 是 使 用 芒 套 列表 的 效果 ， 代 码 如 下 : 

<font color="#0000FF"> 无 序列 表 堪 套 有 序列 表 </font><br /> 

<ul> <!-- 无 序列 表 开 始 --> 

<1i> 标 题 1</1i> 
<1i> 标 题 2</1i> 
<ol> <!-- 被 嵌 套 的 有 序列 表 开 始 --> 
<1i> 标 题 1.1</1i> 
<1i> 标 题 2.1</1i> 


</ol> <!-- 被 嵌 套 的 有 序列 表 结 束 --> 
<1i> 标 题 3</1i> 
</ul> <!-- 无 序列 表 结 束 --> 
<br /> 
<font color="#0000FF"> 有 序列 表 霸 套 无 序列 表 </font><br /> 
<ol> <!-- 有 序列 表 开始 --> 


<1i> 标 题 1</1i> 
<1i> 标 题 2</1i> 
<ul> <!-- 被 嵌 套 的 无 序列 表 开始 --> 
<1i> 标 题 1.1</1i> 
<1i> 标 题 2.1</1i> 


</ul> <!-- 被 嵌 套 的 无 序列 表 结 束 --> 
</1i> 
<1i> 标 题 3</1i> 
</ol> <!-- 有 序列 表 结 束 --> 
效果 如 图 9.9 所 示 。 
PE >"c ， 
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无 序列 表 嵌 大 有 序列 表 


图 9.9 使 用 嵌 套 列表 页 面 效 果 图 
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名 注意: 典 套 列表 ， 可 以 网 套 多 层 的 列表 。 不 过 设计 师 一 般 不 这 样 做 ， 识 套 两 层 以 上 的 列 
表 ， 会 使 浏览 器 出 现 读 取 错 误 ， 导 致 显示 错位 变形 。 


9.4 定义 列表 元 素 <dl> 


定义 列表 元 素 主要 用 于 进行 名 词 解释 或 名 词 定义 。 定 义 列表 包含 两 个 层次 的 列表 ， 名 
词 是 第 一 层 列 表 ， 解 释 是 第 二 层 列 表 ， 即 不 需要 使 用 嵌 套 便 可 以 满足 显示 下 一 级 菜单 的 效 
果 。 定 义 列 表 前 面 没 有 任何 的 图 案 和 排序 标记 ， 每 个 列表 项 带 有 一 段 缩 进 的 定义 文字 。 此 
列表 包括 有 三 个 标签 ， 本 节 将 详细 讲解 定义 列表 里 的 三 个 标签 。 


9.4.1 定义 整体 列表 结构 <dl> 


<dl> 标 签 用 来 定义 列表 的 整体 的 结构 。 使 用 <dl> 标 签 表示 这 是 一 个 定义 列表 。<dl> 标 
签 是 放 在 <body> 标 签 下 的 。 其 语法 结构 如 下 : 

<dl> <!-- 整 体 列表 开始 --> 

<dt> </dt><dd></dd> 

</dl> <!-- 整 体 列 表 结 束 --> 

其 中 , <dt><dd> 标 签 将 会 在 下 面 讲解 。 使 用 <d 记 标签 只 起 到 定义 列表 整体 框架 的 作用 ， 
由 于 不 能 单独 使 用 ， 所 以 这 里 将 不 举例 说 明 ，<dl> 标 签 的 应 用 将 在 下 面 小 节 里 一 起 举例 
说 明 。 


9.4.2 ”定义 列表 术语 标签 <dt> 


<dt> 标 签 用 来 定义 列表 前 半 部 分 的 内 容 , 也 就 是 定义 名 词 部 分 ,<d 忆 标签 需要 写 在 <dl> 
标签 里 面 。 其 语法 结构 如 下 : 


<dl> <!-- 整 体 列表 开始 --> 
<dt> 名 词 </dt> <!-- 定 义 列表 术语 --> 
</dl> <!-- 整 体 列表 结束 --> 


一 个 <d 忆 标签 里 填写 一 个 名 词 ， 需 要 呈现 多 个 名 词 ， 就 得 使 用 多 个 <d 忆 标签。 
【示例 9.10】 下 面 是 使 用 <d 忆 标签 定义 列表 术语 的 效果 ， 代 码 如 下 : 


<dl> <! 一 -整体 列表 开始 -> 
<dt> 名 词 1</dt> 
<dt> 名 词 2</dt> 
<dt> 名 词 3</dt> 


</dl> <!-- 整 体 列表 结束 --> 
效果 如 图 9.10 所 示 。 
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图 9.10 ”使 用 <dt> 标 签 定义 列表 术语 效果 图 


9.4.3 ”定义 注释 项 标签 <dd> 


<dd> 标 签 用 来 定义 列表 后 半 部 分 ， 也 就 是 定义 注释 或 解释 部 分 。<dd> 标 签 和 <dt> 标 签 
一 样 ， 都 是 嵌 套 在 <dl> 标 签 里 面 的 。 其 语法 结构 如 下 : 


<dl> <!-- 整 体 列表 开始 --> 
<dt> 名 词 </dt><dd> 注 释 </dd> 
</dl> <!-- 整 体 列 表 结束 --> 


其 中 ，<dd> 标 签 和 <dP> 标 签 是 并 列 出 现 的 ， 并 不 因为 是 表示 下 一 级 菜单 而 嵌 套 在 <dt> 
标签 里 面 。 
【示例 9.11】 下 面 是 使 用 <dd> 标 签 设置 列表 注释 部 分 的 效果 ， 代 码 如 下 : 


<dl> <!-- 整 体 列表 开始 --> 
<dt> 名 词 1</dt><dd> 注 释 1</dd> 
<dt> 名 词 2</dt><dd> 注 释 2</dd> 
<dt> 名 词 3</dt><dd> 注 释 3</dd> 

</dl> <!-- 整 体 列 表 结 束 --> 


效果 如 图 9.11 所 示 。 


图 9.11 使 用 <dd> 标 签 设置 列表 注释 部 分 效果 图 


全 注意 : 定义 列表 可 以 和 前 面 的 列表 一 样 用 作 识 套 列表 ， 不 过 由 于 定义 列表 本 身 就 有 表示 
下 一 级 菜单 的 标签 ， 所 以 不 建议 使 用 广 套 。 


第 9 章 列表 元 素 


9.5 本 章 小 结 


本 章 主要 学 习 了 列表 元 素 。 详 细 讲 解 了 有 序列 表 、 无 序列 表 和 定义 列表 的 定义 方法 以 
及 嵌 套 列表 的 使 用 方法 。 在 以 后 的 网 站 设计 中 列表 的 使 用 也 很 频繁 ， 所 以 读者 需要 好 好 学 
习 本 章 内 容 。 下 一 章 我 们 将 讲解 表单 的 使 用 。 


9.6 本 章 习 题 


【习题 9-1) 在 网 页 中 创建 两 个 无 序列 表 ， 一 个 是 空心 圆 样式 的 无 序列 表 ， 一 个 是 小 方 
块 样式 的 无 序列 表 ， 标 题 大 小 为 b3， 效 果 如 图 9.12 所 示 。 

【习题 9-2】 在 网 页 中 创建 两 个 有 序列 表 ， 一 个 是 大 写字 母 标 号 样式 的 有 序列 表 ， 一 个 
是 小 写 罗马 数字 标号 的 有 序列 表 ， 标 题 大 小 为 4， 效果 如 图 9.13 所 示 。 


© 9-2html > 
所 言 C 和 file:///F:/bj/ 升 级 /习题 /第 9 宣 /9- 安 以 


空心 圆 无 序列 表 : 大 写字 母 标号 样式 的 有 序列 表 : 


。 无 序列 表 1 A。 有 序列 表 1 
。 无 序列 表 2 B。 有 序列 表 2 
。 无 序列 表 3 C， 有 序列 表 3 


小 方块 无 序列 表 : 小 写 罗马 数字 标号 的 有 序列 表 : 


， 无 序列 表 1 i。 有 序列 表 1 


， 无 序列 表 2 ii， 有 序列 表 2 
。 无 序 列表 3 ii 有 序列 表 3 


图 9.12 创建 无 序列 表 效果 图 图 9.13 ”创建 有 序列 表 效 果 图 


【习题 9-3】 在 网 页 中 创建 嵌 套 列表 ， 无 序列 表 嵌 套 无 序列 表 ， 并 设置 嵌 套 的 无 序列 表 
样式 为 默认 样式 ， 被 嵌 套 的 无 序列 表 样 式 为 小 方块 样式 ， 效 果 如 图 9.14 所 示 。 


全 计 C 省 Ofile//FVbiH 窑 A 
无 序列 表 嵌 套 无 序列 表 : 
。 无 序列 表 1 


。 无 序列 表 2 
=。 无 序列 表 1. 1 
。 无 序列 表 2. 1 
。 无 序列 表 3 


9.14 ”创建 嵌 套 列表 效果 图 


.141 。 


第 10 章 表单 元 素 


表单 是 用 户 与 网 站 交流 的 一 个 渠道 。 通 过 表单 ， 可 以 将 用 户 在 网 页 上 输入 的 信息 提交 
到 后 台数 据 库 ， 从 而 获得 用 户 信息 ， 使 网 页 具有 交互 功能 。 在 网 站 中 ， 表 单 的 用 处 非常 广 
泛 ， 几 乎 所 有 的 网 站 都 离 不 开 表单 。 从 最 简单 的 采集 访问 者 的 姓名 到 留言 板 ， 甚 至 到 复杂 
的 电子 购物 系统 都 大 量 地 使 用 表单 来 采集 提交 的 信息 。 本 章 就 来 详细 讲解 表单 的 使 用 。 


10.1 表单 属性 


一 个 完整 的 表单 在 结构 上 是 由 三 个 部 分 组 成 的 , 包括: 表单 标签 、 表 单 域 和 表单 按钮 。 
其 中 , 表单 标签 包含 了 处 理 表单 数据 所 用 程序 的 URL 以 及 数据 提交 到 服务 器 的 方法 ; 表单 
域 包 含 了 文本 框 、 密 码 框 、 复 选 框 、 单 选 框 等 ， 表 单 按钮 用 于 将 数据 传送 到 服务 器 上 。 表 
单 是 用 <form> 标 签 来 进行 创建 的 。<form> 标 签 是 双 标 签 ， 表单 里 要 出 现 的 内 容 都 会 被 包含 
在 这 对 标签 里 面 。 本 节 先 来 讲解 表单 中 的 一 些 重 要 属性 。 


10.1.1 链接 跳 转 action 


action 属性 是 用 来 设置 链接 跳 转 ， 也 就 是 在 提交 表单 的 内 容 的 时 候 ， 按 照 链接 地 址 跳 
转 到 相应 的 页 面 。 由 于 action 属性 是 用 来 控制 整个 表单 的 提交 内 容 的 ， 所 以 action 属性 要 
写 在 <form> 标 签 里 面 。 其 语法 结构 如 下 所 示 : 

<form action=" 链 接地 址 "></form> <!-- 创 建 表 单 ， 设 置 链接 跳 转 --> 


其 中 ，action 属性 里 面 填写 的 链接 地 址 和 超 链 接 填写 的 链接 地 址 的 写法 和 用 法 是 一 样 
的 。 由 于 表单 的 属性 要 通过 复杂 的 编程 才 可 以 体现 出 效果 ， 所 以 在 这 里 无 法 举例 说 明 。 详 
情 请 参考 其 他 动态 网 页 制作 的 书籍 。 


10.1.2 ”链接 跳 转 方法 method 


设置 了 链接 跳 转 action 以 后 ， 还 需要 设置 当 链 接 跳 转 时 所 使 用 的 跳 转 方法 。 可 以 通过 
method 属性 来 进行 设置 。method 属性 有 两 个 值 : get 和 post。 其 语法 结构 如 下 所 示 : 
<form action=" 链 接地 址 ”method="get/post"></form> 
<!-- 创 建 表 单 ， 设 置 链接 跳 转 ， 设 置 链接 跳 转 方法 --> 
当 method="get" 时 ， 表 示 将 提交 的 数据 附加 在 链接 网 址 后 传递 ， 这 是 默认 值 ; 当 
method="post" 时 ， 表 示 将 数据 打包 发 送 到 链接 所 指 的 网 页 。 可 以 这 样 认 为 ，get 方法 是 不 
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安全 的 ， 一 些 隐私 的 信息 容易 被 第 三 者 看 见 ，post 的 所 有 操作 对 于 用 户 来 说 是 不 可 见 的 ， 
相对 来 说 安全 一 点 。 所 以 一 般 都 提倡 使 用 post 属性 值 。 由 于 表单 的 属性 要 通过 复杂 的 编程 
才 可 以 体现 出 效果 ， 所 以 在 这 里 无 法 举例 说 明 。 详 情 请 参考 其 他 的 动态 网 页 制作 的 书籍 。 


外 注意 : 在 表单 里 ，action 属性 和 method 属性 是 必须 存在 的 属性 。 


10.1.3 ”表单 名 称 name 


在 一 个 页 面 中 可 能 会 出 现 多 个 表单 。 为 了 可 以 方便 地 调用 表单 ， 所 以 需要 对 每 个 表单 
进行 命名 。name 属性 就 是 用 来 设置 表单 名 称 的 。 这 里 的 name 属性 用 法 和 超 链 接 里 的 name 
属性 用 法 有 些 相似 。 其 语法 结构 如 下 所 示 : 

<form name=" 表 单 名 称 "></form> <!-- 插 入 表单 ， 定 义 表单 名 称 --> 


其 中 ，name 属性 的 写法 和 超 链接 里 的 name 属性 写法 一 样 ， 这 里 就 不 再 多 讲 。 由 于 表 
单 的 属性 要 通过 复杂 的 编程 才 可 以 体现 出 效果 ， 记 以 在 这 里 无 法 举例 说 明 。 详 情 请 参考 其 
他 动态 网 页 制作 的 书籍 。 


10.2 输入 标签 <input> 


输入 标签 <input> 是 使 用 最 广泛 的 表单 控件 元 素 , 用 于 定义 输入 域 的 开始 。<input> 标 签 
是 单 标签 ， 所 以 在 使 用 时 ， 要 为 <inpuf> 标 签 加 上 “/” 号 ， 来 达到 标签 的 闭合 。<input> 标 
签 必须 嵌 套 在 表单 标记 中 使 用 。 其 语法 结构 如 下 所 示 : 


<form> <!-- 开 始 插入 表单 --> 
<input name="" type=""/> <!-- 插 入 输入 框 --> 
</form> <!-- 结 束 插入 表单 --> 


其 中 ，type 属性 有 很 多 ， 不 同 的 选择 对 应 不 同 的 输入 方式 〈 将 在 下 面 详细 讲解 ) 。 
10.2.1 文本 框 


文本 框 就 是 用 来 在 输入 框 中 输入 文字 的 ， 可 以 通过 type="text" 来 进行 设置 。 其 语法 形 
式 如 下 所 示 : 


<form> <! 一 -开始 插入 表单 --> 
<input type="text" name=" 名 称 ” id=""” /><!-- 插 入 输入 文字 的 输入 框 --> 
</form> <! 一 -结束 插入 表单 -> 


其 中 ，name=" 名 称 "， 是 为 输入 框 定义 一 个 名 称 ， 此 名 称 用 来 和 以 后 编写 的 代码 进行 
绑 定 。id 属性 里 填写 的 是 自 定义 的 一 个 名 称 ， 此 名 称 和 name 属性 的 名 称 一 样 ， 都 是 用 来 
和 以 后 编写 的 代码 进行 绑 定 。 

【示例 10.1】 下 面 是 使 用 type="text" 来 设置 文本 域 输入 文字 的 效果 ， 代 码 如 下 所 示 : 


<form method="post" action=" "> 
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<!-- 开 始 插入 表单 ， 设 置 链接 跳 转 ， 设 置 链接 跳 转 方法 --> 
输入 文字 : <input type="text" name="txtname" id="textfield" /> 
<!-- 插 入 文本 域 一 > 
</form> <1!-- 结 束 插入 表单 --> 


运行 效果 如 图 10.1 所 示 。 
10.2.2 ”密码 输入 框 
密码 输入 框 是 用 来 输入 密码 的 ， 可 以 通过 type="password" 来 进行 设置 。 设 置 以 后 ， 在 


密码 输入 框 中 输入 的 内 容 就 会 变 成 小 黑 点 或 者 是 “* ”号 ， 可 以 用 来 保护 密码 不 被 第 三 者 看 
见 。 其 语法 结构 如 下 所 示 : 


<form> <!-- 开 始 插入 表单 --> 
<input type="password"” name=" 名 称 ”id="" /><!-- 插 入 输入 密码 的 输入 框 --> 
</form> <!-- 结 束 插入 表单 --> 


其 中 ，name="n"， 是 为 密码 输入 框 定义 一 个 名 称 ， 此 名 称 用 来 和 以 后 编写 的 代码 进行 
绑 定 。id 属性 里 填写 的 是 自 定义 的 一 个 名 称 ， 此 名 称 和 name 属性 的 名 称 一 样 ， 都 是 用 来 
和 以 后 编写 的 代码 进行 绑 定 。 

【示例 10.2】 下 面 是 使 用 type="password" 来 设置 密码 输入 框 输入 密码 的 效果 ， 代 码 如 
下 所 示 : 


<form method="post" action=""> 
<!-- 开 始 插入 表单 ， 设 置 链接 跳 转 ， 设 置 链接 跳 转 方法 --> 
输入 密码 : <input type="password" name="txtpwd" id="txtpword" /> 
<!-- 插 入 密码 输入 框 --> 
</form> <!-- 结 束 插入 表单 --> 


运行 效果 如 图 10.2 所 示 。 


和 了 C 省 昌 filey///F:/bj/ 示 例 /第 十 章 窑 外 


特色 Ed 


CG 从 file:///F:/bj/ 示 例 /第 十 重 窑 入 


输入 文字 : | 可 以 输入 文字 


图 10.1 文本 框 输入 文字 效果 图 图 10.2 密码 输入 框 输入 密码 效果 图 


全 说明 : 从 上 面 两 个 图 中 可 以 看 到 , 输入 密码 和 输入 文字 , 差别 只 是 在 于 type 属性 的 用 法 。 


10.2.3 ” 单 选 框 


单 选 框 一 般 用 于 单独 选择 选项 ， 即 在 表单 中 有 很 多 选项 ， 但 只 能 选择 其 中 一 个 选项 。 
可 以 通过 type="radio" 来 进行 设置 ,多 用 于 性 别 选择 、 问 卷 调查 等 选择 项 目 中 ,其 语法 结构 


。144 。 


第 10 章 表单 元 素 


如 下 所 示 : 
<form> <!-- 开 始 插入 表单 --> 
<input type="radio" name=" 名 称 " id="" value="" checked /> 
<!-- 插 入 单 选 框 --> 
</form> <! 一 -结束 插入 表单 --> 


其 中 ，name 和 id 属性 的 用 法 与 上 面 所 讲 的 用 法 一 样 。value 属性 里 填写 的 是 一 个 定义 
的 名 称 ， 此 名 称 和 name 属性 的 名 称 一 样 ， 都 是 用 来 和 以 后 编写 的 代码 进行 绑 定 。checked 
属性 用 于 指定 该 选项 在 初始 时 就 被 默认 选中 。 如 果 想 要 多 个 内 容 进 行 单 选 ， 单 选 框 里 的 
name 属性 必须 定义 相同 的 值 ， 而 value 属性 不 能 相同 ， 这 样 才 可 以 显示 到 单 选 的 效果 。 
【示例 10.3】 下 面 是 使 用 单 选 框 来 选择 的 效果 ， 代 码 如 下 所 示 : 


<form method="post" action=""> 


<!-- 开 始 插入 表单 ， 设 置 链接 跳 转 ， 设 置 链 接 跳 转 方法 --> 


<p> 选 择 性 别 </p> 
<input name="radio" type="radio" id="radiol" value="radiol" /> 女 <br/> 
<! 一 -插入 单 选 框 --> 
<input name="radio" type="radio" id="radio2" value="radio2" checked/> 男 
<!-- 插 入 单 选 框 --> 
</form> <! 一 -结束 插入 表单 --> 


运行 效果 如 图 10.3 所 示 。 由 图 可 以 看 出 ， 当 打开 网 页 时 ， 默 认 选 择 的 是 “ 男 ”， 而 且 
两 个 选项 只 能 选择 其 中 一 个 。 


司 雪 久 * 
6 全 C 从 | 回 filey//Fi/bj/ 示 例 /第 十 章 窑 | 狼 


选择 性 别 


@ 女 
名 男 


图 10.3 ”使 用 单 选 框 选择 效果 图 


10.2.4” 复 选 框 


复 选 框 用 于 同时 选择 多 个 选项 。 复 选 框 多 用 于 兴趣 选择 等 多 选项 目 。 可 以 通过 
type="checkbox" 属 性 来 进行 设置 。 其 语法 结构 如 下 所 示 : 


<form> <!-- 开 始 插入 表单 --> 
<input type="checkbox"” name=" 名 称 " id="" value="" checkde/> 
<!-- 插 入 复 选 框 --> 

</form> <! 一 结束 插入 表单 --> 


其 中 ，name 属性 、id 属性 和 value 属性 的 用 法 与 前 面 所 讲 的 用 法 一 样 。 在 多 个 复 选 框 
存在 的 情况 下 ，name 属性 、id 属性 和 value 属性 的 命名 会 由 于 数据 库 类 型 的 设 定 而 有 所 不 
同 。 需 要 注意 的 是 ， 同 一 组 的 复 选 框 ，name 属性 必须 相同 ， 而 value 属性 不 能 相同 。 
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【示例 10.4】 下 面 是 使 用 复 选 框 来 选择 的 效果 ， 代 码 如 下 所 示 : 


<form method="post" action=""> 
<!-- 开 始 插入 表单 ， 设 置 链接 跳 转 ， 设 置 链接 跳 转 方法 --> 
<p> 请 选择 你 喜欢 的 体育 运动 : </p> 
<input type="checkbox" name="checkbox" id="checkboxl" value ="checkbox 


1" checked/> 篮 球 <!-- 插 入 复 选 框 --> 
<input type="checkbox" name="checkbox" id="checkbox2" value ="checkbox2" 


/> 排球 <!-- 插 入 复 选 框 --> 
<input type="checkbox" name="checkbox" id="checkbox3" value ="checkbox3" 
/> 游泳 <!-- 插 入 复 选 框 --> 
<input type="checkbox" name="checkbox" id="checkbox4" value ="checkbox4" 
/> 跑步 <!-- 插 入 复 选 框 --> 
</form> <!-- 结 束 插入 表单 --> 


运行 效果 如 图 10.4 所 示 ， 可 以 看 出 它 可 以 同时 选择 多 个 选项 。 
10.2.5 ”隐藏 区 域 


隐藏 区 域 是 指 该 控件 在 页 面 上 不 可 见 。 一 般 用 于 某 项 不 想 让 浏览 者 看 见 而 又 不 方便 将 
其 删除 的 选项 。 可 以 通过 type="hidden" 来 进行 设置 。 其 语法 结构 如 下 所 示 : 


<form> <!-- 开 始 插入 表单 --> 
<input type="hidden" name=" 名 称 ”value="#' /> <!-- 隐 藏 表单 的 元 素 --> 
</form> <!-- 结 束 插入 表单 --> 


其 中 ，value 属性 里 填写 的 是 一 个 发 送信 息 的 地 址 ， 一 般 为 邮箱 地 址 。 

【示例 10.S】 下 面 是 使 用 隐藏 区 域 的 效果 ， 代 码 如 下 所 示 : 

<form method="post" action=""> 
<!-- 开 始 插入 表单 ， 设 置 链接 跳 转 ， 设 置 链接 跳 转 方法 --> 
可 显示 的 区 域 : <input type="text" name="txtname" id="txtname" /><br/> 
隐藏 的 区 域 : <input type="hidden" name="hid" value="62668@126.com" /> <br 
/> <!-- 插 入 隐藏 区 域 --> 

</form> <!-- 结 束 插入 表单 --> 


运行 效果 如 图 10.5 所 示 。 


FREI 
和 CG 和 © file:///F:/bj/ 示 例 /第 二 意 /1( 安 以 
可 显示 的 区 域 : | 


y DD 
和 了 C 组 file:///F:/bj/ 示 例 /第 十 重 窑 入 


请 选择 你 喜欢 的 体育 运动 : s 
隐藏 的 区 域 : 
回 篮 球 回 排 球 回 游 泳 日 网 步 
图 10.4 使 用 复 选 框 选择 效果 图 图 10.5 使 用 隐藏 区 域 的 效果 图 


各 注意 : 此 属性 值 虽然 隐藏 了 其 他 的 元 素 ， 但 是 如 果 使 用 原 代码 打开 还 是 可 以 看 到 的 ， 所 
以 在 使 用 上 ， 请 不 要 使 用 此 属性 值 来 传送 敏感 信息 ， 如 密码 等 。 
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10.2.6 ”提交 按钮 


提交 按钮 是 把 表单 里 的 信息 提交 到 指定 的 数据 库 或 者 其 他 地 方 。 可 以 通过 
type="submit" 来 进行 设置 ， 其 语法 结构 如 下 所 示 

<form> <!-- 开 始 插入 表单 --> 

<input type="submit" name=" 名 称 " id="" value="" /> 
<!-- 插 入 提交 按钮 --> 
<!-- 结 束 插入 表单 --> 


</form> 
其 中 ,value 属性 里 填写 的 是 按钮 上 面 出 现 的 文字 ， 以 表示 该 按钮 是 提交 按钮 ， 可 以 是 
中 文 ， 也 可 以 是 英文 。 
【示例 10.6】 下 面 是 使 用 提交 按钮 的 效果 ， 代 码 如 下 所 示 : 
<form method="post" action=""> 
<!-- 开 始 插入 表单 ， 设 置 链接 跳 转 ， 设 置 链接 跳 转 方法 --> 
输入 名 称 : <input type="text" name="txtname" id="txtname" /><br/> 
<!-- 揪 入 文本 输入 框 --> 
输入 密码 : <input type="password" name="txtpwd" id="txtpword" /><br/> 
<!-- 插 入 密码 输入 框 --> 
<input type="submit" name="button" id="button" value=" 提 交 " /> 
<!-- 插 入 提交 按钮 --> 
</form> <1!-- 结 束 插入 表单 --> 


运行 效果 如 图 10.6 所 示 。 


y DD 表单 x 
二 了 CG 从 昌 filey//F:/bj/ 示 例 /第 二 章 /1( 窑 外 
输入 名 称 : 


输入 密码 : 
提交 


图 10.6 使 用 提交 按钮 效果 图 


10.2.7 ” 重 置 按钮 


重 置 按钮 就 是 把 表单 里 填写 的 信息 全 部 清空 。 可 以 通过 type="reset" 来 进行 设置 。 其 语 
法 结构 如 下 所 示 : 
<form> <!-- 开 始 插入 表单 --> 


<input type="reset" name=" 名 称 "” id="" value="" /> <!-- 插 入 重 置 按钮 --> 
<!-- 结 束 插入 表单 --> 


</form> 
其 中 ,value 属性 里 填写 的 是 按钮 上 面 出 现 的 文字 ， 以 显示 该 按钮 是 重 置 按钮 ， 可 以 是 
中 文 ， 也 可 以 是 英文 。 
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【示例 10.7】 下 面 是 使 用 重 置 按钮 效果 ， 代 码 如 下 所 示 : 


<form method="post" action=""> 
<!-- 开 始 插入 表单 ， 设 置 链接 跳 转 ， 设 置 链接 跳 转 方法 --> 
输入 名 称 : <input type="text" name="txtname" id="txtname" /><br/> 
<!-- 插 入 文本 输入 框 --> 
输入 密码 : <input type="password" name="txtpwd" id="txtpword" /><br/> 
<!-- 插 入 密码 输入 框 --> 
<input type="reset" name="button" id="button" value=" 重 置 " / 
<!-- 插 入 重 置 按钮 --> 
</form> <! 一 -结束 插入 表单 --> 


运行 效果 如 图 10.7 所 示 。 当 单 击 重 置 按钮 后 ,表单 中 输入 的 名 称 和 密码 就 清空 了 ， 如 
图 10.8 所 示 。 


/Ose 8 
后 了 CG 用 @file/W/FVbj/ 示 例 /第 十 齐 /1( 究 入 和 了 C 省 @@file/W/FVbj/ 示 例 /第 十 齐 /1( 穷 a | 
输入 名 称 : ewwr 输入 名 称 : 
输入 密码 : “| 输入 密码 : 

下 医 风 
图 10.7 使 用 重 置 按钮 前 的 效果 图 图 10.8 ”使 用 重 置 按钮 后 的 效果 图 
外 技巧 : 使 用 系统 自 带 的 按钮 会 根据 浏览 器 和 系统 设置 的 不 同 ， 而 显示 不 同 效果 的 按钮 ， 


如 果 想 使 按钮 更 加 漂亮 和 统一 ， 请 使 用 图 像 按 钮 来 进行 设置 。 


10.2.8 图 像 按钮 


图 像 按 钮 是 指使 用 图 像 作为 按钮 来 提交 表单 数据 。 使 用 图 像 按 钮 可 以 使 表单 按钮 更 加 
的 漂亮 。 可 以 通过 type="image" 来 进行 设置 。 由 于 图 像 按钮 一 般 需 要 在 代码 中 添加 链接 图 
片 的 地 址 ， 所 以 在 图 像 域 里 会 多 出 一 个 src 属性 。 其 语法 结构 如 下 所 示 : 

<form> <!-- 开 始 插入 表单 --> 

<input type="image" name=" 名 称 ”id="" src=" 图 片 链接 地 址 ” /> 

<!-- 插 入 图 像 域 --> 

</form> <!-- 结 束 插入 表单 --> 

其 中 ，src 属性 是 用 来 填写 图 像 的 链接 地 址 的 ， 关 于 图 像 的 链接 地 址 ， 此 属性 的 用 法 和 
第 5 章 的 图 像 超 链接 的 用 法 是 一 样 的 ， 这 里 就 不 再 阐述 。 

【示例 10.8】 下 面 是 使 用 图 像 按钮 的 效果 ， 使 用 的 图 像 为 images 文件 夹 里 的 qd.jpg， 
代码 如 下 所 示 : 

<form method="post" action=""> 


<!-- 开 始 插入 表单 ， 设 置 链接 跳 转 ， 设 置 链接 跳 转 方法 --> 
输入 名 称 : <input type="text" name="txtname" id="txtname" /><br/> 
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<!-- 插 入 文本 输入 框 --> 


输入 密码 : <input type="password" name="txtpwd" id="txtpword" /> 


<!-- 插 入 密码 输入 框 --> 
<input type="image" name="imageradio" id="imageFradio" src="images/ 


qd.jpg" /> <!-- 插 入 图 像 按钮 --> 


</form> <!-- 结 束 插入 表单 --> 
运行 效果 如 图 10.9 所 示 ， 可 以 看 到 ， 当 把 鼠标 放 在 图 像 按钮 上 时 ， 鼠 标 样式 会 改变 。 


了 表单 9 
所 访 C 在 file/W/FVbj/ 示 例 /第 二 章 /1( 闪 | 以 


输入 名 称 : 站 
| 输入 密码 : 


图 10.9 使 用 图 像 按钮 的 效果 图 


外 技巧 : 由 于 这 里 的 图 像 是 用 来 作为 按钮 的 作用 ， 所 以 在 使 用 上 ， 放 在 这 里 的 图 像 不 宜 


下 忆 


过 大 。 


10.3 下拉 列表 框 


立 列表 框 是 一 个 下 拉 式 的 列表 或 者 带 有 深 动 条 的 列表 ， 用 户 可 以 在 列表 中 选择 一 个 


选项 。 使 用 列表 框 需要 两 个 标签 结合 使 有 用， 分别 是 <select> 标 签 和 <option> 标 签 。 这 两 个 标 
签 是 双 标签 ， 有 开始 标签 和 结束 标签 。 在 这 两 个 标签 里 分 别 需 要 设置 儿 个 属性 。 其 语法 结 


构 如 下 所 示 : 
<form> <!-- 开 始 插入 表单 --> 
<select name=" 名 称 " id=""> <!-- 开 始 插入 下 拉 列 表 框 --> 
<option value=" "> </option> <!-- 插 入 列表 项 --> 
</select> <!-- 结 束 插入 下 拉 列 表 框 -=-> 
</form> <!-- 结 束 插入 表单 --> 


其 中 , <select> 标 签 是 一 个 整体 标签 , 用 来 表示 此 区 域 为 下 拉 列 表 框 ,同时 使 用 <select> 
标签 来 给 name 属性 和 id 属性 进行 设置 。<option> 标 签 是 用 来 表示 下 拉 列 表 中 的 列表 项 。 


此 标签 


有 的 value 属性 是 为 每 个 列表 项 定义 一 个 名 称 ， 此 名 称 用 来 和 以 后 编写 的 代码 进行 


如 果 让 下 拉 列 表 框 在 一 开始 就 默认 选中 某 个 选项 ， 只 需要 在 <option> 标 签 里 再 多 加 一 
个 selected 的 属性 值 ， 此 属性 值 为 固定 属性 值 。 


【 示 


例 10.9】 下 面 是 使 用 列表 框 的 效果 ， 代 码 如 下 所 示 : 


<form method="post" action=""> 
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<!-- 开 始 插入 表单 ， 设 置 链接 跳 转 ， 设 置 链接 跳 转 方法 --> 
<p> 请 选择 喜欢 的 运动 : </p> 


<select name="selt" id="select"> <!-- 开 始 插入 下 拉 列表 框 --> 
<option value=" Favorite" selected > 篮球 </option> <!-- 插 入 列表 项 --> 
<option value="Favorite"> 排 球 </option> <1!-- 插 入 列表 项 --> 
<option value="Favorite"> 游 泳 </option> <!-- 插 入 列表 项 --> 
<option value="Favorite" > 跑步 </option> <!-- 插 入 列表 项 --> 
</select> <!-- 结 束 插入 下 拉 列 表 框 --> 
</form> <!-- 结 束 插入 表单 --> 


运行 效果 如 图 10.10 所 示 。 


fF 


OR x \ 
全 CG 省 filey//F:/bj/ 示 例 /第 + 章 /l( 窑 以 


请 选择 喜欢 的 运动 : 
排球 


跑步 


图 10.10 ”使 用 下 拉 列 表 框 的 效果 图 


10.4 文本 区 域 


文本 区 域 用 于 当 输 入 的 文字 较 多 的 时 候 使 用 ， 可 以 输入 多 行文 字 。 当 文字 内 容 超出 文 
本 区 域 ， 会 自动 显示 滚动 条 。 文 本 区 域 和 文本 框 的 不 同 之 处 在 于 ， 文 本 框 只 能 输入 一 行文 
字 ， 而 文本 区 域 可 以 输入 多 行文 字 。 可 以 通过 <textarea> 标 签 来 进行 设置 。<textarea> 标 签 
是 双 标签 ， 有 开始 标签 和 结束 标签 。 其 语法 结构 如 下 所 示 : 


<form> <!-- 开 始 插入 表单 --> 

<textarea name=" 名 称 " id="" cols="" rows=""></textarea> 
<!-- 插 入 文本 区 域 --> 

</form> <!-- 结 束 插入 表单 --> 


其 中 ，name=" 名 称 "， 是 为 输入 框 定义 一 个 名 称 ， 此 名 称 用 来 和 以 后 编写 的 代码 进行 
绑 定 。id 属性 里 填写 的 是 自 定义 的 一 个 名 称 ， 此 名 称 和 name 属性 的 名 称 一 样 ， 都 是 用 来 
和 以 后 编写 的 代码 进行 绑 定 。cols 属性 用 来 定义 文本 区 域 的 宽度 ，rows 属性 用 来 定义 文本 
区 域 的 高 度 。 通 过 设置 ， 可 以 使 文本 区 域 变 成 适合 网 页 的 大 小 。 

【示例 10.10】 下 面 是 使 用 文本 区 域 的 效果 ， 代 码 如 下 所 示 : 


<form method="post" action=""> 


<!-- 开 始 插入 表单 ， 设 置 链接 跳 转 ， 设 置 链接 跳 转 方法 --> 


<textarea name="textarea" id="txttarea" cols="30" rows="4"></textarea> 
<! 一 -插入 文本 区 域 --> 
</form> <! 一 结束 插入 表单 --> 


ms 
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运行 效果 如 图 10.11、 图 10.12 所 示 。 由 图 10.12 可 以 看 出 ， 当 输入 的 文字 超出 文本 区 
域 后 ， 文 本 区 域 就 会 自动 生成 滚动 条 。 


图 10.11 使 用 文本 区 域 输入 文字 前 效果 图 图 10.12 使 用 文本 区 域 输入 文字 后 效果 图 


10.5 本 章 


本 章 主要 学 习 了 表单 的 用 法 ， 详 细 介绍 了 表单 中 的 属性 以 及 表单 中 各 个 标签 的 使 用 。 
当然 , 要 完全 实现 表单 的 作用 还 要 结合 动态 网 页 的 脚本 程序 。 但 是 通过 本 章 对 表单 的 学 习 ， 
可 以 为 以 后 的 编程 打下 基础 。 在 本 章 中 ， 读 者 应 该 熟练 掌握 表单 中 各 个 标签 的 使 用 。 下 一 
章 我 们 将 讲解 网 页 中 的 布局 。 


10.6 本 章 


【习题 10-1】 创建 一 个 简单 的 输入 框 表单 ， 并 添加 提交 和 重 置 按钮 ， 效 果 如 图 10.13 
所 示 。 


【习题 10-2】 创 建 一 个 问题 调查 表单 ， 其 中 包含 了 单 选 按钮 、 复 选 按钮 、 图 像 提交 按 
钮 等 信息 ， 效 果 如 图 10.14 所 示 。 


所 他 人 包 肖 CT ~ 


< 了 > C 从 [7 -Ll 窑 | 入 | 选择 班级 


| 输入 名 称 : TE ‖ 日 计算 机 1 班 加 计算 机 2 班 © 计算 机 3 班 


输入 年 龄 : 请 选择 你 喜欢 的 颜色 : 


输入 性 别 : 回 蓝 色 盏 黄色 目 红色 日 绿色 
输入 住址 : 


上 一 


图 10.13 创建 简单 输入 框 表单 效果 图 10.14 创建 选择 按钮 效果 图 


【习题 10-3】 创 建 一 个 问卷 表单 ， 其 中 性 别 选 项 要 求 为 下 拉 菜 单 选项 ， 效 果 如 图 10.15 
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所 示 。 
【习题 10-4】 创 建 一 个 留言 板 ， 其 中 包含 提交 和 重 置 按钮 ， 效 果 如 图 10.16 所 示 。 


> CO fieWF/bjH/10 间 /10-4html 。。。 训 


留言 板 


| [请 本 这 里面 下 全 宝 南 摧 间 页 


图 10.15 创建 下 拉 菜 单 效果 图 图 10.16 创建 留言 板 效 果 图 
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如 果 想 要 制作 出 既 漂 亮 、 使 用 起 来 又 方便 的 网 站 ， 那 么 首先 把 网 站 的 布局 做 好 是 非常 
有 必要 的 。 网 站 布局 ， 就 是 把 网 页 中 的 文字 、 图 像 、 表 格 、 表 单 等 诸多 构成 要 素 合理 地 安 
排 起 来 ， 使 网 站 看 起 来 更 协调 。 一 个 网 站 布局 的 好 坏 直 接 影响 网 站 的 质量 和 网 站 的 视觉 效 
果 。 好 的 布局 会 使 网 站 看 起 来 更 舒服 ， 浏 览 者 也 会 更 愿意 去 看 这 个 网 站 。 本 章 我 们 就 来 讲 
解 网 站 布局 的 方法 。 


11.1 <div> 标 签 


网 页 的 布局 主要 采用 三 种 方式 ， 表格 、 框 架 和 <div> 标 签 。 这 三 种 布局 方式 各 有 利 次 。 
在 前 面 我 们 已 经 讲 过 表格 和 框架 ， 本 节 我 们 就 来 讲解 使 用 div 来 设计 布局 的 方法 。 它 也 是 
现在 较为 流行 的 一 种 编写 方法 。<div> 标 签 只 是 一 个 空 标签 ， 仅 使 用 div 是 不 能 用 来 设计 布 
局 的 ， 需 要 div+CSS 来 共同 完成 布局 的 设计 。 关 于 CSS 部 分 ,将 会 在 第 12 章 做 详细 讲述 。 
本 节 将 讲述 <div> 标 签 的 具体 用 法 。 


11.1.1 <div> 标 签 在 内 容 中 的 应 用 


在 网 页 内 容 中 使 用 <div> 标 签 可 以 用 来 定义 网 页 内 容 中 的 区 域 。 这 里 将 为 <div> 标 签 加 
上 style 属性 ， 来 作为 示例 解说 。style 属性 是 用 来 设置 网 页 内 容 的 内 部 样式 的 。 关 于 style 
属性 的 具体 说 明 会 在 第 12 章 讲述 。<div> 标 签 是 双 标签 ， 其 语法 结构 如 下 所 示 ; 

<div style="" > 网 页 内 容 </div> <!--<div> 标 签 的 应 用 --> 

【示例 11.1】 下 面 是 使 用 <div> 标 签 显示 页 面 内 容 的 效果 。 为 了 使 效果 更 明显 ， 在 style 
属性 里 添加 color 属性 ， 为 文本 添加 颜色 ， 代 码 如 下 所 示 : 


<div style="color:#00ffff;" > <!--<div> 标 签 开始 --> 
这 是 网 页 的 内 容 区 域 
</div> <!--<div> 标 签 结束 --> 


运行 效果 如 图 11.1 所 示 。 
11.1.2 div 府 套 


<div> 标 签 也 可 以 进行 嵌 套 ， 使 用 嵌 套 可 以 更 好 地 进行 布局 。 其 语法 结构 如 下 所 示 : 


<div> <!--div 开始 --> 
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<div> <!-- 幅 套 div 开始 --> 

被 嵌 套 的 内 容 

</div> <!-- 嵌 套 div 结束 --> 
</div> <!--div 结束 --> 
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图 11.1 使 用 <div> 标 签 设置 内 容 区 域 效果 图 


通过 上 面 语法 可 以 看 出 , <div> 标 签 的 嵌 套 是 非常 简单 的 , 只 要 把 不 同 的 样式 放 在 <div> 
标签 里 即 可 。<div> 标 签 的 用 法 看 似 简单 ， 但 想 学 好 <div> 标 签 来 设计 多 浏览 器 兼容 的 布局 ， 
却 一 点 也 不 简单 ， 有 兴趣 的 读者 可 以 参考 详细 讲述 div+CSS 的 书籍 。 

【示例 11.2】 下 面 是 使 用 <div> 标 签 的 嵌 套 的 效果 。 为 了 效果 更 明显 ， 会 对 <div> 标 签 使 
用 style 属性 来 添加 边框 、 背 景色 、 宽 度 、 高 度 ， 代 码 如 下 所 示 : 

<div style="border:1px solid #000000; background-color: #ffff00; 

width:300px; height:200px;"> <!--div 开始 ， 定 义 边框 的 宽度 为 px， 线条 为 黑色 


实 线 , 背景 色 为 黄色 ， 宽 度 为 300px, 高 度 为 200px--> 
<div style="border:lpx solid #FF0000; background-color: #00ffff; 


width:200px; height:150px;"> ”<!-- 爸 套 div 开始 ， 定 义 边框 的 宽度 为 lpx， 线 
条 为 红色 实 线 ， 背 景 颜色 为 蓝 色 ， 宽 度 为 200px， 


高 度 为 150px--> 
div 嵌 套 
</div> <!-- 霸 套 div 结束 --> 
</div> <!--div 结束 --> 


其 中 ， 对 于 style 属性 里 各 种 属性 值 的 使 用 ， 在 第 12 章 会 有 详细 的 讲述 ， 这 里 只 做 注 
释 说 明 。 效 果 如 图 11.2 所 示 。 
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11.1.3 ”定义 浮动 框架 


浮动 框架 是 指 利用 样式 使 <div> 标 签 定义 出 来 的 框架 浮动 在 页 面 上 。 可 以 通过 style 样 
式 中 的 float 属性 来 进行 设置 。float 属性 是 样式 里 的 一 个 属性 ， 这 里 将 它 提前 拿 出 来 讲述 。 


它 有 三 个 属性 值 : left、right 和 none。 其 语法 


<div style="float:left/none/right;"> </div> 


结构 如 下 所 示 : 


<!--div 定义 浮动 框架 --> 


其 中 ， 当 float:right 时 ， 表 示 对 象 在 页 面 右边 浮动 ; 当 float:left 时 ， 表 示 对 象 在 页 面 左 
边 浮动 ， 当 float:none 时 ， 表 示 对 象 在 页 面 中 不 浮动 ， 对 象 不 浮动 时 默认 在 页 面 左边 。 
【示例 11.3】 下 面 是 使 用 float 属性 设置 框架 浮动 的 效果 ， 代 码 如 下 所 示 : 


<div style="float:right;"> 
定义 对 象 右 边 浮 动 

</div> 

<br/> 

<br/> 

<div style="float:left;"> 
定义 对 象 左边 浮动 

</div> 

<br/> 

<br/> 

<div style="float:none;"> 
定义 对 象 不 浮动 


</div> 


运行 效果 如 图 11.3 所 示 。 


<!-- 定 义 对 象 右边 浮动 --> 


<!-- 定 义 浮动 结束 --> 


<!-- 定 义 对 象 左边 浮动 --> 


<!-- 定 义 浮动 结束 --> 


<!-- 定 义 对 象 不 浮动 --> 
<!-- 定 义 浮动 结束 --> 


f 


定义 对 象 左边 浮动 
定义 对 象 不 浮动 


表单 x 
上 E 言 C 在 回 fileW/FVbj/ 示 例 /第 11 齐 /11. 窜 以 


定义 对 象 右边 浮动 


图 11.3 使 用 float 属性 设置 框架 浮动 效果 图 


全 注意 : 样式 里 的 属性 和 属性 值 之 间 不 是 用 “=” 号 来 表示 ， 而 是 用 英文 的 “:” 号 来 表示 。 
在 属性 表达 结束 时 要 记得 在 后 面 加 上 “:” 号 。 


11.1.4 定义 左右 结构 的 框架 


定义 左右 结构 的 框架 ， 也 就 是 在 一 个 大 的 <div> 标 签 中 嵌 套 两 个 小 的 <div> 标 签 。 然 后 


i 
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再 通过 float 属性 把 这 两 个 小 的 <div> 标 签 浮动 在 左右 两 边 。 其 语法 结构 如 下 所 示 : 


<div> <!--div 开始 --> 
<div Style "Float: lert; "></div> <!--div 定义 左 浮动 --> 
<div style="float:right;"></div> <!--div 定义 右 浮动 --> 
</div> <!--div 结束 --> 


【示例 11.4】 下 面 是 使 用 <div> 标 签 制作 左右 结构 框架 的 效果 ， 代 码 如 下 所 示 : 


<div style="width:500px; height:200px; border:1px solid #000000; 
background-color: #ffff00; "> <!-- 为 整体 定义 宽度 、 高 度 和 背景 颜色 --> 
<div style="float:left; width:200px;height:50px; border:1px solid 
#000000; background-color: #00ffff; "> 左边 框架 </div> 
<!--div 定义 左 浮动 框架 ， 为 左边 框架 定义 宽度 、 高 度 和 背景 颜色 --> 
<div style="float:right; width:200px; height:70px;border:lpx solid 
#000000; background-color: #00ffff; "> 右边 框架 </div> 
<!--div 定义 右 浮动 框架 ， 为 右边 框架 定义 宽度 、 高 度 和 背景 颜色 --> 


</div> 


运行 效果 如 图 11.4 所 示 。 


图 11.4 使 用 <div> 标 签 制作 左右 结构 框架 效果 图 


外 注意 : <div> 标 签 定义 的 框架 ， 不 一 定 要 设置 高 度 ， 在 没 设置 的 情况 下 ， 会 因 内 容 的 增 
加 而 自动 变 高 。 


11.1.5 ”定义 横向 结构 的 框架 


横向 结构 的 框架 是 指 在 页 面 上 几 个 嵌 套 的 小 框架 依次 横向 排列 在 大 框架 中 。 它 和 左右 
结构 的 框架 有 些 相似 , 都 是 利用 同样 的 原理 做 出 来 的 。 只 是 它 的 几 个 框架 都 是 左 或 右 浮动 ， 
依次 横向 排列 在 大 框架 中 。 其 语法 结构 和 左右 框架 的 语法 形式 一 样 ， 这 里 就 不 再 说 明 。 

【示例 11.S】 下 面 是 使 用 <div> 标 签 制作 横向 结构 框架 的 效果 ， 这 里 嵌 套 了 3 个 <div> 
标签 来 定义 横向 结构 的 框架 。 代 码 如 下 所 示 : 


<div style="width:600px;height:400px; border:1lpx solid #000000;"> 


“Gs 
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<!-- 为 整体 定义 宽度 为 600px， 高 度 为 400px--> 
<div style="float:]left; width:150px; height:400px; background-color: 
#ffff00; "> 左边 框架 </div> 
<!-- 定 义 一 左 浮动 框架 ， 定 义 框架 的 宽度 为 150px， 高 度 为 400px， 背 景 颜 色 为 黄色 --> 
<div style="float:]left; width:300px; height:400px; background-color: 
#00£ff00; "> 中间 框 架 </div> 
<! 一 -定义 一 左 浮动 框架 ， 定 义 框架 的 宽度 为 300px， 高 度 为 400px， 背 景 颜色 为 绿色 -> 
<div style="float:left; width:150px; height:400px; background-color: 
#00ffff; "> 右边 框架 </div> 
<! 一 -定义 一 左 浮动 框架 ， 定 义 框架 的 宽度 为 150， 高 度 为 400px， 背 景 颜色 为 蓝 色 --> 


</div> 


运行 效果 如 图 11.5 所 示 。 


全 C 覃 ”file:///F:/bj/ 示 例 /第 11 音 /11.5.html 
左边 框架 


图 11.5 使 用 <div> 标 签 制作 横向 结构 框架 效果 图 


各 技巧 : 使 用 横向 结构 的 框架 要 为 每 个 框架 都 做 浮动 设置 ， 这 样 才 可 以 使 框架 于 乖 地 排 成 


一 横 排 。 当 嵌 套 的 3 个 <div> 标 签 的 宽度 和 等 于 大 的 <div> 标 签 的 宽度 时 ，3 个 框 
架 就 会 横向 铺 满 大 的 框架 。 


11.1.6 ”定义 纵向 结构 的 框架 


dU 


dD 


纵向 结构 的 框架 和 横向 结构 的 框架 有 些 相似 ， 只 是 纵向 结构 的 框架 是 在 垂直 线 上 分 割 
H 来 的 框架 。 它 是 在 横向 结构 框架 的 基础 上 多 加 了 一 个 clear 属性 ， 使 框架 纵向 排列 。 其 语 


法 结构 如 下 所 示 : 


Ts 
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<div> 
<div style=" float:left;clear:both;"></div> <!-- 为 框架 清除 浮动 --> 
<div style="clear:both;"></div> <!-- 为 框架 清除 浮动 --> 


</div> 
其 中 ，clearboth: 表 示 清 除 泽 动 ， 是 固定 格式 。 当 浮动 被 清除 时 ，<div> 标 签 里 的 框架 


会 被 自动 换行 ， 从 而 使 框架 纵向 排列 。 
【示例 11.6】 下 面 是 使 用 <div> 标 签 制作 纵向 结构 框架 的 效果 ， 代 码 如 下 所 示 : 
<div style="width:300px;height:300px; border:1px solid #000000;"> 
<!-- 为 整体 定义 宽度 --> 
<div style="float:left; width:300px; height:80px; background-color: 
#ffff00;clear:both;"> 上 边框 架 </div> 
<! 一 -定义 一 左 浮动 框架 ， 定 义 框架 的 宽度 为 300px， 高 度 为 80px， 背 景 颜色 为 黄色 --> 
<div style=" width:200px; height:120px; background-color: #00ff£f00; 
clear:both ;"> 中 间 框 架 </div> 
<!-- 定 义 框架 的 宽度 为 200px， 高 度 为 120px， 背 景 颜色 为 绿色 --> 
<div style=" width:250px; height:100px; background-color: #00ffff; 
clear:both ;"> 下 边框 架 </div> 
<! 一 -定义 框架 的 宽度 为 250px， 高 度 为 100px， 背 景 颜色 为 蓝 色 --> 


</div> 


运行 效果 如 图 11.6 所 示 。 
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图 11.6 ”使 用 <div> 标 签 制作 纵向 结构 框架 效果 图 


外 技巧 : 被 谋 套 在 大 的 <div> 标 签 里 的 小 <div> 标 签 ， 加 起 来 的 高 度 最 好 要 小 于 大 的 <div> 
标签 的 高 度 ， 这 样 才 不 容易 造成 框架 变形 。 


11.2 本 章 小 结 
本 章 主要 学 习 了 设计 布局 的 另 一 种 方法 div+CSS, 主要 讲解 了 <div> 标 签 的 各 种 使 用 方 


二 生生 
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法 , 并且 学 习 了 CSS 布局 中 的 style 属性 。<div> 标 签 需要 与 CSS 配合 才能 更 好 地 实现 网 站 
的 布局 。 通 过 本 章 的 学 习 ， 读 者 可 以 了 解 到 使 用 div+CSS 是 比较 好 的 设计 布局 的 方法 。 在 
以 后 的 网 站 设计 中 ， 会 大 量 用 到 这 种 布局 方法 。 在 下 一 章 我 们 就 将 开始 讲解 CSS 样式 的 
使 用 。 


11.3 本 章 习 题 


【习题 11-1】 在 网 页 内 容 中 使 用 <div> 标 签 ， 添 加 样式 ， 使 网 页 文字 变 得 更 加 美观 ， 效 
果 如 图 11.7 所 示 。 
【习题 11-2】 在 网 页 内 容 中 使 用 div 嵌 套 ， 制 作出 如 图 11.8 所 示 网 页 的 效果 图 。 
「 [GE 
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这 是 一 个 媒 套 div 本 


淄 画 


图 11.7 使 用 <div> 标 签 效果 图 图 11.8 设置 嵌 套 div 效果 图 


【习题 11-3】 在 网 页 中 创建 两 个 浮动 框架 ， 并 插入 两 幅 画 ， 设 置 一 个 向 左边 浮动 ， 另 
-个 向 右边 浮动 ， 效 果 如 图 11.9 所 示 。 
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图 11.9 设置 浮动 框架 效果 图 
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CSS (Cascading Style Sheet) 主要 是 用 来 为 网 页 中 的 元 素 进行 格式 设置 以 及 对 网 页 进 

行 排版 和 风格 设计 。CSS 样式 看 似 简单 ， 但 要 真正 精通 是 不 容易 的 。 本 章 作为 CSS 样式 的 

一 章 ， 先 从 最 基础 的 知识 开始 介绍 ， 为 以 后 CSS 的 应 用 奠定 基础 。 接 下 来 我 们 就 来 详细 
介绍 CSS 样式 的 基础 知识 。 


12.1 CSS 样式 表 类 别 


CSS 样式 表 可 以 分 为 三 种 :外 部 样式 表 、 内 部 样式 表 和 内 翌 样 式 表 。 这 三 种 样式 表 的 
用 法 是 不 同 的 ， 本 节 将 详细 讲述 这 三 种 样式 表 的 用 法 。 


12.1.1 外 部 样式 表 


外 部 样式 表 是 指 样式 文件 以 .css 为 扩展 名 保存 为 一 个 独立 的 文本 文件 , 然后 使 用 <link> 
标签 把 它 调用 出 来 (<link> 标 签 放 <head> 标 签 里 面 )。 这 样 便 可 以 很 方便 地 在 当前 网 页 使 
用 外 部 样式 表 ， 而 不 用 重新 定义 样式 。<link> 标 签 是 单 标签 ， 它 没有 闭合 标签 ， 所 以 在 书 
写 时 ， 要 使 用 “/” 号 来 对 <link> 标 签 进行 闭合 。 其 语法 结构 如 下 : 

<link href=" 外 部 样式 文件 地 址 ” rel="stylesheet" type="text/css" /> 

<!-- 连 接 外 部 样式 表 --> 

其 中 ，href 属性 里 的 外 部 样式 文件 的 地 址 ， 地 址 的 填写 方法 和 超 链 接 的 链接 地 址 写法 
一 样 。rel="stylesheet"， 表 示 告 诉 浏览 器 连接 的 是 一 个 样式 表 文 件 ， 是 固定 格式 。 
type="textless"， 表 示 传输 的 文本 类 型 为 样式 表 类 型 文件 ， 这 也 是 固定 格式 。 由 于 这 里 还 没 
讲 到 CSS 的 使 用 ， 所 以 暂时 不 做 示例 ， 只 给 出 代码 作为 例子 。 

【示例 12.1】 下 面 是 使 用 链接 外 部 样式 表 的 例子 ， 这 里 使 用 的 外 部 样式 表 放 在 css 文件 
夹 里 ， 命 名 为 12.1.css， 代 码 如 下 : 


<link href="css/12.1.css" rel="stylesheet" type="text/css" /> 


<!-- 链 接 外 部 样式 表 --> 
外 说 明 : 一 个 页 面 不 止 可 以 插入 一 个 外 部 样式 表 ， 还 可 以 根据 需要 插入 多 个 外 部 样式 表 。 


12.1.2 ”内 部 样式 表 


内 部 样式 表 是 指 将 CSS 语法 直接 放 在 页 面 里 ， 仅 供 本 网 页 使 用 。 通 过 <style> 标 签 来 进 
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行 设置 ， 需 要 将 <style> 标 签 放置 在 <head> 标 签 中 进行 调用 。<style> 标 签 是 双 标 签 ， 有 起 始 
和 结束 标签 。 其 语法 结构 如 下 : 


<style type="text/css"> 
SI 

/* 样式 内 容 ( 注 释 标 签 ) */ 
= 

</style> 


其 中 ，type="text/css" 的 意义 和 外 部 连接 样式 表 的 意义 是 一 样 的 。 需 要 注意 的 是 样式 内 
容 必须 写 在 注释 标签 里 面 才 可 以 生效 。 由 于 这 里 还 没 讲 到 CSS 的 使 用 , 所 以 暂时 不 做 示例 ， 
只 给 出 代码 作为 例子 。 
【示例 12.2】 下 面 是 使 用 内 部 样式 表 的 例子 ， 其 中 的 样式 内 容 将 在 下 面 的 章节 中 讲解 。 
代码 如 下 : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.o0org/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 12.2</title> 
<style type="text/css"> 
A0== 
.point{ 
font-size:20px; /* 设 置 字号 为 20px*/ 
font-style:italic; /* 设 置 为 斜体 显示 */ 
line-height:20px; /* 设 置 行 间 距 为 20px*/ 


} 

一 -> 
</style> 
</head> 
<body> 
</body> 
</html> 


12.1.3 ”内 赚 样 式 表 


内 嵌 样 式 表 我 们 在 第 11 章 中 已 经 接触 过 。 内 翌 样 式 表 是 指 直接 使 用 HIML 标签 中 的 
style 属性 来 定义 样式 ， 但 是 只 在 所 定义 的 区 域内 才 有 效 。 内 嵌 样 式 表 也 是 通过 style 来 进 
行 设 置 。 不 过 style 在 这 里 是 作为 一 个 标签 里 的 属性 出 现 的 ， 而 不 是 作为 单独 的 标签 出 现 。 
其 语法 结构 如 下 : 

< 标签 style=" 样 式 "> 


其 中 ,在 style 属性 中 可 以 多 个 样式 并 存 ， 之 间 用 英文 ;号 来 隔 开 。 在 第 11 章 中 使 用 的 
style 属性 就 是 内 性 样式 表 ， 这 里 再 举 一 个 简单 的 例子 。 

【示例 12.3】 下 面 是 使 用 内 榜样 式 表 的 例子 ， 代 码 如 下 : 

<div style="border:1lpx solid #000000; background-color: #ffff00; width: 


200px; height:150px;"> 内 嵌 样 式 表 <!-- 定 义 边 框 的 宽度 为 1px， 线 条 为 黑色 实 线 ， 


背景 颜色 为 黄色 ， 宽 度 为 200px， 高 度 为 150px--> 
</div> 


" 
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效果 如 图 12.1 所 示 。 


Fete 
和 了 C 本 | 加 fileyW//F/bj/ 示 例 第 : 安 | 以 
内 嵌 样 式 表 


图 12.1 使 用 内 柑 样 式 表 效 果 图 


外 技巧 : 在 网 站 制作 中 ， 一 般 都 会 使 用 外 部 样式 表 来 对 网 站 进行 设置 。 


12.2 选 择 器 


选择 器 是 CSS 控制 HIML 文档 中 对 象 的 一 种 方式 ， 简 单 地 说 就 是 用 它 来 告诉 浏览 器 
这 段 代码 将 应 用 到 哪个 对 象 。 通 过 调用 ，HTML 可 以 根据 内 容 的 不 同 ， 而 选择 不 同 的 样式 
来 修饰 内 容 。 所 以 要 将 CSS 样式 应 用 到 HTML 中 , 首先 要 选择 合适 的 选择 器 , 来 对 HTML 
的 元 素 进行 样式 的 控制 。 本 节 将 详细 讲述 几 种 选择 器 的 用 法 。 


12.2.1 派生 选择 器 


派生 选择 器 是 指 选择 器 组 合 中 ， 前 一 个 对 象 包含 后 一 个 对 象 ， 对 象 之 间 使 用 英文 的 空 
格 键 来 隔 开 。 这 样 做 有 个 好 处 ， 就 是 规定 了 派生 选择 器 下 的 样式 只 能 在 指定 的 位 置 才 可 以 
使 用 。 如 果 对 某 一 元 素 中 的 子 对 象 进行 样式 指定 时 ， 派 生 选 择 器 就 派 上 用 场 了 。 由 于 选择 
器 是 非常 灵活 的 ， 所 以 无 法 用 固定 的 格式 来 作 语法 形式 ， 这 里 将 举例 说 明 其 语法 和 用 法 。 

【示例 12.4】 下 面 是 使 用 派生 选择 器 为 hl 标签 内 的 p 标签 设置 样式 的 效果 ， 代 码 如 下 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 

WWW.Ww3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.0org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 


<title> 示 例 12.4</title> 
<style type="text/css"> 


i 

hl pl{ 
font-size:14px; /* 设 置 字体 大 小 为 14px*/ 
background-color:#00ffff; /* 设 置 背景 颜色 为 蓝 色 */ 
width:150px; /* 设 置 宽度 为 150px*/ 
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度 为 


1 /* 指定 pp 标签 要 包含 在 hl 标签 里 面 */ 
二 = 
</style> 


</head> 
<body> 
<h1> 
派生 选择 器 
<p> 应 用 到 的 样式 </p> 
</h1> 
</body> 
</html> 


效果 如 图 12.2 所 示 。 


5 CG 省 file:y//F:/bj/ 示 例 /第 : 安 入 


派生 选择 器 


应 用 到 的 样式 


e - 


图 12.2 使 用 派生 选择 器 为 网 页 样式 命名 效果 图 


由 图 12.2 可 以 看 到 只 有 标签 hl 的 子 标签 p 的 字体 大 小 为 14px， 背 景 颜色 为 蓝 色 ， 帘 
150px。 而 其 他 的 内 容 还 是 默认 样式 。 值 得 注意 的 是 ，CSS ee ee 


HTML 里 使 用 的 注释 标签 不 同 ，CSS 样式 里 的 注释 标签 是 以 “/#* ”开始 ， 以 “ ”结束 。 


12.2.2 id 选择 器 


HTML 中 用 id 属性 对 样式 进行 调用 的 选择 器 。 在 CSS 样式 中 ，id 选择 器 使 用 “#” 符 号 进 
行 标识 。 


明 其 


在 一 个 网 页 中 , 每 一 个 标签 都 可 以 用 一 个 id 属性 进行 名 称 的 指定 。id 选择 器 就 是 指 在 


由 于 选择 器 是 非常 灵活 的 ， 所 以 无 法 用 固定 的 格式 来 作 语 法 形式 ， 这 里 将 举例 说 
各 法 和 用 法 。 
【示例 12.5】 下 面 是 使 用 id 选择 器 为 id 为 content 的 标签 设置 样式 的 效果 ， 代 码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 
WWW.W3.0org/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 12.5</title> 

<style type="text/css"> 

天 二 二 二 

#content{ 


font-size:20px; /* 设 置 字体 大 小 为 20px*/ 


"I 
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background-color:#00ff00; /* 设 置 背 景 颜色 为 绿色 */ 
width:250px; /* 设 置 宽度 为 250px*/ 

</style> 

</head> 

<body> 

<div id="content"> 这 是 一 个 id 选择 器 应 用 </dijv><br/><br/><!--id 选择 器 放 在 新 添加 

的 div 标签 里 --> 

<div id="mail"> 这 是 一 个 id 选择 器 应 用 </div> 

</body> 

</html> 


效果 如 图 12.3 所 示 。 可 以 看 出 只 有 id 为 content 的 div 标签 里 的 样式 发 生 改 变 ，id 为 


mail 的 div 标签 里 的 样式 并 未 改变 。 


IE x Mi 


6 全 CG 省 口 file///FVbj/ 升 级 /零点 起 - 交 | 三 


这 是 一 个 id 选择 器 应 用 


这 是 一 个 id 选择 器 应 用 


图 12.3 使 用 id 选择 器 设置 样式 效果 图 


外 技 巧 : 选择 器 的 命名 最 好 是 可 以 和 内 容 相 称 的 英文 单词 , 这样 有 助 于 以 后 对 内 容 的 修改 ， 
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行 调用 的 选择 器 。 类 选择 器 可 以 包括 HTML 中 不 同类 型 的 一 些 元 素 ， 就 如 同 对 这 些 元 素 进 


便于 查看 ， 但 是 注意 不 要 用 到 HTML 的 特定 的 标签 属性 ， 这 样 会 造成 标签 属性 
的 错乱 。 


.2.3 ”类 选择 器 


类 选择 器 ， 就 是 对 网 页 样式 归 类 的 选择 器 ， 它 是 指 在 HIML 中 用 class 属性 对 样式 进 


行 分 类 一 样 。 类 选择 器 命名 时 要 在 类 名 称 前 面 加 上 英文 的 句号 “.”， 以 此 来 和 HTML 中 
的 class 属性 进行 绑 定 。 由 于 选择 器 是 非常 灵活 的 ， 所 以 无 法 用 固定 的 格式 来 作 语法 形式 ， 


这 是 


将 举例 说 明 其 语法 和 用 法 。 
【示例 12.6】 下 面 是 使 用 类 选择 器 为 类 添加 样式 的 效果 ， 代 码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 
WWW.Ww3.0rg/TR/xhtml1/DTD/xhtml1l-transitional.dtd"> 

<html xmlns="http://www.w3.0org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 12.6</title> 

<style type="text/css"> 


第 12 章 CSS 样式 基础 知识 


font-size:20px; /* 设 置 字 体 大 小 为 20px*/ 
background-color:#ffff00; /* 设 置 背 景 颜色 为 黄色 */ 
width:250px; /* 设 置 宽度 为 250px*/ 
height:50px; /* 设 置 高 为 50px*/ 

} 

> 

</style> 

</head> 

<body> 


<div class="S1"> 这 是 一 个 类 选择 器 应 用 </div> 
<hl class="S1"> 这 是 一 个 类 选择 器 应 用 </h1> 
<span class="S1"> 这 是 一 个 类 选择 器 应 用 </span> 
</body> 

</html> 


效果 如 图 12.4 所 示 。 可 以 看 出 ， 无 论 是 什么 HTML 标签 ， 页 面 中 所 有 类 名 为 S1 的 标 
签 的 样式 都 被 设置 了 。 


Dam26 x i \ 


6 这 C 组 | 侣 fiey//F/bj/ 开 级 /要 点 起 -好 | 三 
这 是 一 个 类 选择 器 应 用 


这 是 一 个 类 选择 器 应 用 


这 是 一 个 类 选择 器 应 用 


y 


图 12.4 使 用 类 选择 器 为 类 添加 样式 效果 图 


12.3 CSS 优先 级 


CSS 优先 级 是 指 在 众多 CSS 样式 中 ，HTML 会 优先 考虑 哪个 样式 。 在 CSS 样式 使 用 
中 ， 可 以 分 为 两 种 优先 级 ， 一 种 是 样式 表 的 优先 级 ， 另 一 种 是 选择 符 的 优先 级 。 本 节 我 们 
就 来 讲解 这 两 种 优先 级 。 

1. 样式 表 优 先 级 


CSS 样式 在 HTML 的 使 用 中 , 会 采取 就 近 原 则 来 设置 样式 。 越 接近 内 容 的 优先 级 越 高 。 
上 面 讲 过 的 三 种 样式 表 中 ， 优 先 级 从 高 到 低 依次 是 : 内 嵌 样 式 表 、 内 部 样式 表 、 外 部 样 
式 表 。 

2. 选择 器 优先 级 

在 上 面 讲解 的 各 种 选择 器 中 ， 优 先 级 从 高 到 低 依次 是 : id 选择 器 、 类 选择 器 、 派 生 选 
择 器 。 


“GT 
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【示例 12.7】 下 面 是 选择 器 优先 级 使 用 效果 ， 代 码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 
WWW.W3.0rg/TR/xhtml1l/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 12.7</title> 

<style type="text/css"> 


< 

hl pl{ 
font-size:14px; /* 设 置 字 体 大 小 为 14px*/ 
background-color:#00ffff; /* 设 置 背 景 颜色 为 蓝 色 */ 
width:150px; /* 设 置 宽度 为 1 50px*/ 

J 

Si 
font-size:20px; /* 设 置 字 体 大 小 为 20px*/ 
background-color:#ffff00; /* 设 置 背 景 颜色 为 黄色 */ 
width:250px; /* 设 置 宽度 为 250px*/ 
height:50px; /* 设 置 高 为 50px*/ 

2 

EA 

#content{ 
font-size:30px; /* 设 置 字 体 大 小 为 30px*/ 
background-color:#00ff£00; /* 设 置 背景 颜色 为 绿色 */ 
width:250px; /* 设 置 宽度 为 250px*/ 

2 

</style> 

</head> 

<body> 

<p><h1> 
选择 器 
<p> 派 生 选 择 器 优先 级 </p> 

</h1></p> 


<h1><P class="S1"> 类 选择 器 优先 级 </p></h1> 

<hl><p class="S1" id="content"> id 选择 器 优先 级 </P></h1> 
</body> 

</html> 


效果 如 图 12.5 所 示 。 


3 F0027 
| C 在 De/F/b/RaRA pHiML | 


| 选择 器 
派生 选择 器 优先 级 
类 选择 器 优先 级 


id 选 择 器 优先 级 


图 12.5 选择 器 优先 级 应 用 效果 图 


“168。 
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由 图 12.5 可 以 看 出 ， 第 一 、 二 行 元 素 应 用 的 是 派生 选择 器 的 样式 ; 第 三 行 加 入 了 类 选 
择 器 ， 所 以 优先 应 用 类 选择 器 ; 第 四 行 是 类 选择 器 和 id 选择 器 都 同时 存在 ， 优 先 选择 应 用 
的 是 id 选择 器 。 


12.4 本 章 小 结 


本 章 学 习 了 CSS 样式 的 基础 知识 ， 主 要 讲解 了 CSS 样式 表 的 类 别 、 选 择 器 以 及 CSS 
样式 的 优先 级 。 要 学 好 CSS， 这 些 都 是 我 们 首先 要 了 解 的 最 基本 的 知识 。 本 章 的 难点 是 选 
择 器 的 使 用 ， 读 者 需要 认真 学 习 。 下 一 章 将 详细 讲解 CSS 样式 中 的 各 个 属性 。 


12.5 本 章 习题 


【习题 12-1】CSS 样式 表 分 为 儿 种 ， 各 有 什么 特点 ? 

【习题 12-2】 选 择 器 分 为 几 种 ， 分 别 用 什么 来 标识 ? 

【习题 12-3】 使 用 外 部 样式 表 和 id 选择 器 来 设置 网 页 中 文字 的 样式 ， 效 果 如 图 12.6 
所 示 。 


| 


全 方 C 从 |@filey//F/bj/ 天 级 / 习 时 安 | 入 
这 是 应 用 样式 的 文字 


这 是 没有 应 用 样式 的 文字 


图 12.6 设置 文字 样式 效果 图 
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了 解 完 CSS 样式 的 基础 知识 后 ， 就 要 开始 对 CSS 设置 属性 和 属性 值 了 。CSS 属性 是 
CSS 样式 中 最 重要 ， 也 是 最 复杂 的 部 分 。CSS 样式 的 属性 非常 多 ， 也 因此 能 够 实现 各 种 各 
样 的 表现 形式 。CSS 之 所 以 功能 强大 ， 和 CSS 的 属性 密 不 可 分 。CSS 常用 的 属性 包括 : 背 
景 属性 、 文 本 属性 、 边 框 属性 、 外 边 距 属性 、 内 边 距 属性 、 列 表 属 性 等 。 本 章 将 详细 讲解 
这 些 属性 。 


13.1 CSS 背景 属性 


通过 background 属性 可 以 设置 页 面 任何 元 素 的 背景 。background 属性 和 HTML 中 的 
background 属性 的 用 法 是 一 样 的 。 但 在 CSS 样式 里 ，background 属性 比 HTML 中 多 出 了 
很 多 属性 值 。 本 节 就 来 详细 讲述 CSS 背景 属性 的 设置 。 


13.1.1 背景 颜色 background-color 


background-color 属性 可 以 用 来 为 指定 的 元 素 添 加 背景 颜色 , 和 HTML 的 bgcolor 属性 
是 同样 用 法 的 。 但 在 使 用 CSS 样式 属性 时 ， 属 性 和 属性 值 中 间 是 用 英文 的 “:” 号 隔 开 的 ， 
而 且 写 完 后 在 后 面 必须 加 上 英文 的 “;”， 表 示 该 属性 已 经 描述 完毕 。 其 语法 结构 如 下 : 
background-color: 颜 色 ; /* 设 置 元 素 背 景 颜色 */ 


background-color 属性 里 颜色 的 填写 方法 和 bgcolor 属性 的 颜色 填写 方法 一 样 ， 这 里 就 
不 再 阐述 。 

【示例 13.1】 下 面 是 使 用 background-color 属性 来 设置 背景 颜色 的 效果 。 这 里 将 使 用 内 
部 样式 表 来 作为 CSS 样式 的 链接 ， 使 用 id 选择 器 ， 命 名 为 bgroundcolor。 代 码 如 下 : 


<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>CSS 样式 </title> 

<style type="text/css"> 

LS 

#bgroundcolor{ background-color:#00ffff;} /* 用 id 选择 器 定义 样式 */ 

-> 

</style> 

</head> 

<body> 

<div id="bgroundcolor"> 设 置 背 景 颜色 为 蓝 色 </div> <!-- 使 用 div 标签 来 绑 定 样式 --> 
</body> 
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效果 如 图 13.1 所 示 。 
了 @ cssz “WE 


6 全 C 全 | fileyW//F:/bj/ 示 例 /第 13 意 / 窑 | 以 


设置 背景 颜色 为 蓝 色 


图 13.1 使 用 background-color 属性 设置 背景 颜色 效果 图 


外 说 明 : background-color 属性 比 bgcolor 属性 用 得 更 加 广泛 ， 而 且 无 标签 限制 。 


13.1.2 ”背景 图 片 background-image 


背景 图 片 background-image 属性 是 用 来 为 指定 的 元 素 添加 背景 图 片 。 其 语法 结构 如 下 ; 
background-image:url (图 片 链 接地 址 ) ; /* 设 置 背景 图 片 */ 


其 中 ， 使 用 background-image 属性 的 属性 值 要 把 图 片 的 链接 地 址 放 在 url0 里 面 ， 这 样 
才能 正确 地 链接 到 图 片 , 图 片 链接 路 径 的 书写 格式 和 HIML 中 图 片 链接 路 径 的 书写 格式 一 
样 ， 这 里 就 不 再 阐述 。 

【示例 13.2】 下 面 是 使 用 background-image 属性 来 设置 背景 图 片 的 效果 。 图 片 使 用 
images 文件 夹 中 的 13.1jpg。 代 码 如 下 : 


<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>CSS 样式 </title> 
<style type="text/css"> 
4 一 
#bgimage 
{ 
background-image:url(../images/13.1.jpg); 
width:300px; 
height:300px; 
/* 用 id 选择 器 定义 样式 */ 
一 -> 
</style> 
</head> 
<body> 
<div id="bgimage"> 设 置 背景 图 片 </div> <!-- 使 用 div 标签 来 绑 定 样式 --> 
</body> 
</html> 


效果 如 图 13.2 所 示 。 
外 技巧 : 使 用 background-image 属性 ， 必 须 为 背景 图 片 增加 高 度 和 宽度 ， 这 样 才 可 以 正确 
地 显示 出 背景 图 片 。 
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J @ csst 红 * 
后 言 C 省 昌 filey//F:/bj/ 示 例 /第 13 童 /13. 窑 以 


图 13.2 使 用 background-image 属性 设置 背景 图 片 效 果 图 


13.1.3 ”设置 重复 背景 图 片 background-repeat 


background-repeat 属性 用 来 设置 背景 图 片 是 否 可 以 重复 出 现 以 及 重复 出 现 的 位 置 。 
background-repeat 属性 具有 四 个 属性 值 : no-repeat、repeat、repeat-x 和 repeat-y。 其 语法 结 
构 如 下 : 
background-repeat :no-repeat/repeat/repeat-x/repeat-y; 
/* 设 置 重复 使 用 背景 图 片 */ 


当 background-repeat:no-repeat; 时 ， 表 示 只 在 元 素 开始 处 显示 一 次 图 像 ， 不 可 以 重复 出 
现 ， 当 background-repeatrepeat;: 时 ， 表 示 图 片 可 以 重复 出 现 ， 从 水 平和 垂直 方向 平 铺 整个 
背景 ， 当 background-repeat:repeat-x; 时 ， 表 示 图 片 可 以 重复 出 现 ， 但 只 能 水 平平 铺 整个 背 
景 ; 当 background-repeat:repeat-y: 时 ， 表 示 图 片 可 以 重复 出 现 ， 但 只 能 垂直 平 铺 整 个 背景 。 
默认 为 repeat 属性 值 。 

【示例 13.3】 下 面 是 使 用 background-repeat 属性 来 设置 背景 图 片 位 置 的 具体 效果 。 这 
里 使 用 了 四 个 id 选择 器 来 设置 不 同 的 显示 效果 , 依次 命名 为 bgrptl、 bgrpt2、bgrpt3、bgrpt4。 
图 片 使 用 了 images 文件 夹 里 的 13.2.jpg。 代 码 如 下 : 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 示 例 13.3</title> 


<style type="text/css"> 
EU 


#bgrpt1 
{ 


background-image:url(../images/13.2.jpg); 
background-repeat:no-repeat; 
width:400px; 
height:150px; 
} /* 定 义 背 景 图 片 不 可 以 重复 使 用 */ 
#bgrpt2 


background-image:url(../images/13.2.jpg); 
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background-repeat:repeat; 
width:400px; 
height:150px; 
} /* 定 义 背 景 图 片 从 水 平和 垂直 方向 平 铺 使 用 */ 
#bgrpt3 
i 
background-image:url(../images/13.2.jpg); 
background-repeat:repeat-x; 
width:400px; 
height:150px; 
} /* 定 义 背 景 图 片 从 水 平方 向 平 铺 使 用 */ 
#bgrpt4 
{ 
background-image:url(../images/13.2.jpg); 
background-repeat:repeat-y; 
width:400px; 
height:150px; 
E /* 定 义 背景 图 片 从 垂直 方向 平 铺 使 用 */ 
一 -> 
</style> 
</head> 
<body> 
不 重复 使 用 图 片 <div id="bgrpt1l" > </div> <br /> 
重复 使 用 图 片 并 水 平 垂 直 铺 满 <div id="bgrpt2"> </div> <br /> 
重复 使 用 图 片 向 水 平方 向 平 铺 <div id="bgrpt3"> </div> <br /> 
重复 使 用 图 片 向 垂直 方向 平 铺 <div id="bgrpt4"> </div> 
</body> 
</html> 


效果 如 图 13.3 所 示 。 


F033 \ | 
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重复 使 用 图 片 并 水 平 委 直销 满 


重复 使 用 图 片 向 水 平方 向 平 铺 


重复 使 用 图 片 向 委 直 方向 平 铺 


图 13.3 ”使 用 background-repeat 属性 设置 背景 图 片 位 置 效果 图 
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各 说明: 在 CSS+div 的 布局 设置 中 ，background-repeat 属性 是 非常 常用 的 一 种 图 片 设置 


13.1.4 设置 固定 背景 图 片 background-attachment 
background-attachment 属性 是 用 来 设置 背景 图 片 是 固定 在 它 的 原始 位 置 还 是 随 内 容 一 


起 滚动 。background-attachment 属性 具有 两 个 属性 值 : fixed 和 scroll。 其 语法 结构 如 下 : 
background-attachment :fixed/scroll; /* 设 置 固定 背景 图 片 */ 


当 background-attachment:fixed; 时 ,表示 固定 背景 图 片 ， 背景 图 片 不 随 着 页 面 的 滚动 而 
滚动 ; 当 background-attachment:scroll: 时 ， 表 示 不 固定 背景 图 片 ， 让 背景 图 片 随 着 页 面 的 滚 
动 而 滚动 。 默 认为 不 固定 背景 图 片 。 

【示例 13.4】 下 面 是 使 用 background-attachment 属性 来 固定 背景 图 片 位 置 的 具体 效果 。 
图 片 使 用 了 images 文件 夹 里 的 13.3.gif。 代 码 如 下 : 

<head> 

<style type="text/css"> 

QU== 

#bgat1l1 

| background-image:url(../images/13.3.jpg); 

background-attachment :fixed; 


width:400px; 

height:150px; 
) /+ 固定 背景 图 片 */ 
.bgat2 


{ 
background-image:url(../images/13.3.jpg; 
background-attachment:scroll; 
width:400px; 
height:150px; 

| /* 不 固定 背景 图 片 */ 

一 -> 

</style> 

</head> 

<body> 

设置 固定 背景 图 片 

<div id="bgat1l"> </div><br /> 

设置 不 固定 背景 图 片 

<div class="bgat2"> </div> 

</body> 

</html> 


效果 如 图 13.4 所 示 。 
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国定 他国 上 - 


页 面 内 容 滚动 前 ， 
设置 不 固定 背景 图 片 文字 都 在 图 片 的 左 
固定 背 景 图 片 


页 面 内 容 滚动 后 ， 
1 中 的 文字 滚动 ， 
图 片 并 没有 

; 2 中 的 图 片 随 
人 


图 13.4 使 用 background-attachment 属性 设置 固定 背景 图 片 效 果 图 


13.1.5 ”设置 背景 图 片 位 置 background-position 


background-position 属性 用 来 设置 背景 图 片 相对 于 元 素 的 位 置 。background-position 属 
性 有 两 个 值 ， 用 来 对 水 平 位 置 和 垂直 位 置 进行 定位 。 其 语法 结构 如 下 : 
background-position:X Y; /* 设 置 背景 图 片 位 置 */ 


其 中 ，X 有 三 个 值 : left、center 和 right， 用 来 设置 水 平 位 置 的 左边 、 中 间 和 右边 ; Y 
也 有 三 个 值 : ttp、center 和 bottom， 用 来 设置 垂直 位 置 的 上 边 、 中 间 和 下 边 。 两 个 属性 值 
中 间 要 用 一 个 英文 的 空格 号 进行 隔 开 。 

background-position 属性 除了 可 以 设置 背景 图 片 位 置 之 外 ， 还 可 以 用 来 定位 背景 图 像 。 
定位 背景 图 像 是 指 背景 图 片 通过 垂直 和 水 平 距离 来 规定 距离 框架 的 高 度 和 宽度 。 它 的 使 用 
和 设置 背景 图 片 位 置 一 样 , 需要 设置 两 个 值 来 对 垂直 位 置 和 水 平 位 置 进 行 定位 。 语法 如 下 : 


background-position: 左边 距离 上 边 距离 ; ” /* 设 置 定位 背景 图 像 */ 
其 中 ， 左 边 距 离 是 表示 背景 图 片 和 框架 左边 的 距离 ， 上 边 距 离 是 表示 背景 图 片 和 框架 
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上 面 的 距离 。 它们 之 间 的 距离 可 以 用 百分比 来 表示 , 也 可 以 用 固定 的 单位 距离 来 进行 设置 。 


【示例 13.5】 下 面 是 使 用 background-position 属性 来 设置 背景 图 片 位 置 的 效果 。 图 片 使 


用 了 images 文件 夹 里 的 13.3jpg。 代 码 如 下 : 


<head> 

<style type="text/css"> 

= 

#bgpt1 
packground-image:url(../images/13.3.jpg); /* 插 入 背景 图 */ 
background-repeat :no-repeat; /* 设 置 背 景 图 不 重复 */ 
background-color:#00ffff; /* 插 入 背景 颜色 */ 


background-position:left center; 
/* 用 居中 对 章 设 置 水 平 距离 ， 用 下 面 对 齐 设置 垂直 距离 */ 


width:400px; /* 设 置 宽度 */ 
height:150px; /* 设 置 高 度 */ 

} /* 设 置 放置 背景 图 片 位 置 */ 

#bgpt2 

{ 
background-image:url(../images/13.3.jpg); /* 插 入 背景 图 */ 
background-repeat :no-repeat; /* 设 置 背 景 图 不 重复 */ 
background-color:#ffff00; /* 插 入 背景 颜色 */ 
background-position:60px 50px; /* 设 置 水 平 距离 和 垂直 距离 */ 
width:400px; /* 设 置 宽度 */ 
height:200px; /* 设 置 高 度 */ 

) /* 设 置 定位 背景 图 像 */ 

一 -> 

</style> 

</head> 

<body> 

设置 背景 图 片 位 置 

<div id="bgpt1"> </div> <!-- 使 用 div 标签 来 绑 定 样式 bgpt1--> 

<br /> 定位 背景 图 片 位 置 

<div id="bgpt 2"> </div> <!-- 使 用 div 标签 来 绑 定 样式 bgpt 2--> 

</body> 

</html> 


效果 如 图 13.5 所 示 。 
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图 13.5 ”使 用 background-position 属性 设置 背景 图 片 位 置 效果 图 
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外 技巧 : 背景 颜色 和 背景 图 片 可 以 一 起 使 用 。 


13.2 CSS 文本 属性 


在 一 个 网 站 中 ,文本 内 容 的 样式 也 是 很 重要 的 ， 它 是 给 浏览 者 的 第 一 印象 。 在 CSS 样 
式 中 也 可 以 设置 HTML 中 的 文本 内 容 的 样式 。CSS 中 文本 属性 也 有 很 多 ， 包 括 字体 颜色 、 
文本 间距 、 对 齐 方式 等 。 本 节 就 来 讲解 CSS 中 的 文本 属性 。 


13.2.1 字体 颜色 color 


字体 颜色 就 是 为 字体 填充 颜色 ， 可 以 通过 color 属性 来 进行 设置 。 这 是 CSS 样式 中 很 
常用 的 一 个 属性 。 其 语法 格式 如 下 : 
color :字体 颜色 ; /* 设 置 文本 字体 颜色 */ 


其 中 ，color 属性 里 填写 的 颜色 书写 格式 和 背景 颜色 background-color 属性 一 样 ， 这 里 
就 不 再 亲 述 。 
【示例 13.6】 下 面 是 使 用 color 属性 来 设置 文本 字体 颜色 的 效果 。 这 里 将 使 用 内 嵌 样 式 
表 来 作为 CSS 样式 的 连接 。 内 嵌 样 式 表 是 把 样式 放 在 <body> 标 签 里 面 的 , 所 以 这 里 只 给 出 
<body> 标 签 里 的 代码 。 代 码 如 下 : 
<p style="color:#00ffff;"> 设 置 字 体 颜 色 为 蓝 色 </p> 
<!-- 使 用 内 医 样 式 表 设置 文本 字体 颜色 为 蓝 色 --> 


效果 如 图 13.6 所 示 。 


6 全 CC 省 @file/W/FVbj/ 示 家 以 


图 13.6 使 用 color 属性 设置 文本 颜色 效果 图 


13.2.2 ”字符 间距 letter-spacing 
字符 间距 是 用 来 定义 文本 中 每 个 字符 之 间 的 距离 , 可 以 通过 letter-spacing 属性 来 设置 。 
语法 形式 如 下 : 
letter-spacing:n; /* 设 置 字符 间距 #/ 
其 中 ，n 是 用 来 填写 字符 间距 的 大 小 。 
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【示例 13.7】 下 面 是 使 用 letter-spacing 属性 来 设置 字符 问 距 的 效果 。 代 码 如 下 : 


<p style="letter-spacing:5px;"> 字 符 间距 为 5px</P><br/><br/> 
<!-- 使 用 行内 样式 表 设 置 字符 间距 为 5px--> 
<p > 这 是 正常 间距 </p> 


效果 如 图 13.7 所 示 。 
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字符 间距 为 5px 


这 是 正常 间距 


图 13.7 使 用 letter-spacing 属性 设置 字符 间距 效果 图 


13.2.3 ” 行 间距 line-height 


line-height 属性 可 以 用 来 设置 文本 中 行 和 行 之 间 的 距离 ， 使 文本 行 之 间 看 起 来 不 会 太 
拥挤 。 其 语法 结构 如 下 : 
line-height:n; /* 设 置 行 间距 */ 


其 中 ，n 是 用 来 填写 行 间距 的 大 小 的 。 

【示例 13.8】 下 面 是 使 用 line-height 属性 来 设置 行 间 距 的 效果 。 代 码 如 下 : 

<p style="line-height:30px;"” width="250px"> 设 置 行 间距 为 30px 设置 行 间距 为 30px 
<br/> 设 置 行 间距 为 30px 设置 行 间 距 为 30px <br/> 设 置 行 间距 为 30px 设置 行 间 距 为 30px 
</p> <!-- 使 用 行内 样式 表 设 置 行 间距 为 30px--> 

<p width="250px"> 这 是 正常 的 字体 间距 这 是 正常 的 字体 间距 <br/> 这 是 正常 的 字体 间距 这 是 正 
常 的 字体 间距 < </p> 


效果 如 图 13.8 所 示 。 


二 言 C 种 昌 filey///Fybj/ 示 例 /第 13 宣 /13.8hti 窑 以 


设置 行 间 距 为 30px 设 置 行 间 距 为 30px 
设置 行 间 距 为 30px 设 置 行 间 距 为 30px 


设置 行 间 距 为 30px 设 置 行 间 距 为 30px 


这 是 正常 的 字体 间距 这 是 正常 的 字体 间距 
这 是 正常 的 字体 间距 这 是 正常 的 字体 间距 
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图 13.8 ”使 用 line-height 属性 设置 行 间距 效果 图 
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息 技 巧 : 一 般 设 计 师 为 文本 内 容 添加 行 间距 的 时 候 ， 中 文 内 容 当 字体 为 12px 时 ， 行 间距 
会 设置 为 22px。 这 样 会 使 页 面 更 加 的 清晰 明朗 。 


13.2.4 文本 对 齐 方式 text-align 


text-align 属性 可 以 用 来 设置 文本 内 容 的 对 齐 方式 。text-align 属性 有 四 个 值 : left、 right、 
center 和 justify。 其 语法 结构 如 下 : 
text-align:left/right/center/justify; /* 设 置 文 本 对 齐 方 式 */ 


当 text-align:left; 时 , 表示 左 对 齐 ; 当 text-align:right; 时 , 表示 右 对 齐 ; 当 text-align:center; 
表示 居中 对 齐 ; 当 text-align:justify; 时 ， 表 示 两 端 对 齐 。 默 认 情 况 下 为 左 对 齐 。 
【示例 13.9】 下 面 是 使 用 text-align 属性 来 设置 文本 对 齐 方式 的 效果 。 这 里 将 使 用 内 髓 
样式 表 来 作为 CSS 样式 的 连接 。 代 码 如 下 : 

<body> 


<table border="1"> 
EE 


<td style="text-align:left;" width="369"> 文 本 左 对 齐 文本 左 对 齐 文本 左 对 齐 <br/> 

文本 左 对 齐 文本 左 对 齐 文 本 左 对 齐 </td> <!-- 使 用 内 人 嵌 样 式 表 设置 文本 左 对 齐 --> 

< 
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<td width="369" height="91" style="text-align:right;"> 文 本 右 对 齐 文 本 右 对 齐 

<br/> 文 本 右 对 齐 文本 右 对 齐 <br/> 文 本 右 对 齐 文 本 右 对 齐 <br/> 文 本 右 对 齐 文本 右 对 齐 </td> 
<!-- 使 用 内 霸 样 式 表 设 置 文本 右 对 齐 --> 


时 


</tr> 
<tr> 
<td width="369" height="107" style="text-align:center;"> 文 本 居中 对 齐 文本 居中 
对 齐 <br/> 文 本 居中 对 齐 文 本 居中 对 齐 <br/> 文 本 居中 对 齐 文本 居中 对 齐 </td> 
<!-- 使 用 内 爸 样 式 表 设 置 文本 居中 对 齐 --> 
</tr> 
<tr> 
<td width="369" height="110" style="text-align:justify;"><p> 文 本 两 端 对 齐 文 
本 两 端 对 齐 文本 两 端 对 齐 文本 两 端 齐 文本 两 端 对 齐 文本 两 端 对 齐 文本 两 端 对 齐 </td> 
<!-- 使 用 内 嵌 样 式 表 设 置 文本 两 端 对 齐 --> 
</tr> 
</table> 


效果 如 图 13.9 所 示 。 


全 技巧 : text-align:justify: 两 端 对 齐 对 于 对 齐 内 容 效 果 相 当 好 ， 所 以 在 很 多 时 候 ， 设 计 师 都 
会 使 用 此 属性 值 来 对 文本 内 容 进行 对 齐 . 


13.2.5 ”修饰 文本 text-decoration 


修饰 文本 就 是 用 来 定义 文本 字体 的 修饰 效果 ， 比 如 为 文本 添加 下 划 线 、 上 划 线 、 删 除 
线 等 。 可 以 通过 text-decoration 属性 来 设置 。 其 语法 结构 如 下 : 


text-decoration:underline/line-through/overline; /* 设 置 文 本 修饰 */ 


a 
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On33 > 
SS < Can filey/F/bj/ 示 例 / 第 13 童 /13.9h 安 a 


文本 左 对 齐 文本 左 对 齐 文本 左 对 齐 
文本 左 对 齐 文本 左 对 齐 文本 左 对 齐 | 
文本 右 对 齐 文本 右 对 齐 | 

文本 右 对 齐 文本 右 对 齐 | 
文本 右 对 齐 文本 右 对 齐 | 
文本 右 对 齐 文本 右 对 齐 | 


文本 居中 对 齐 文本 居中 对 齐 
文本 居中 对 齐 文本 居中 对 齐 
文本 居中 对 齐 文本 居中 对 齐 


文本 两 端 对 齐 文本 两 端 对 齐 文本 两 端 对 齐 文 
Fe 


图 13.9 使 用 text-align 属性 设置 文本 对 齐 方 式 效果 图 


当 text-decoration:underline; 时 , 表示 为 文本 增加 下 划 线 ; 当 text-decoration:line-through; 
时 ， 表 示 为 文本 增加 删除 线 ;， 当 text-decoration:overline; 时 ， 表 示 为 文本 增加 上 划 线 。 使 用 
text-decoration 属性 不 止 可 以 单个 属性 值 对 文本 内 容 进 行 设置 , 还 可 以 多 个 属性 值 对 文本 内 
容 进行 设置 。 

【示例 13.10】 下 面 是 使 用 text-decoration 属性 来 修饰 文本 的 效果 。 这 里 将 使 用 内 医 样 
式 表 来 作为 CSS 样式 的 连接 。 代 码 如 下 : 

<p style="text-decoration:underline;" width="200px";height="100px"> 为 文本 

添加 下 划 线 </p><br/><br/> <!-- 为 文本 添加 下 划 线 --> 

<pstyle="text-decoration:line-through;" width="200px";height="100px"> 为 文 

本 添加 删除 线 </p> <br/><br/> <!-- 为 文本 添加 删除 线 --> 


<p style="text-decoration:overline;" width="200px";height="100px"> 为 文本 添 
加 上 划 线 </p> <!-- 为 文本 添加 上 划 线 --> 


效果 如 图 13.10 所 示 。 


全 了 C 本 @file///FVbj/ 示 例 /第 13 齐 /13.10. 宫 入 
为 文本 添加 下 划 线 


| 


图 13.10 ”使 用 text-decoration 属性 添加 文本 修饰 效果 图 
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13.2.6 文本 缩 进 text-indent 


文本 缩 进 是 用 来 定义 段落 文本 的 首 行 缩 进 ， 以 达到 不 用 空格 而 实现 首 行 缩 进 的 效果 。 
可 以 通过 text-indent 属性 来 进行 设置 。 其 语法 结构 如 下 : 
text-indent:n; /* 设 置 文 本 缩 进 */ 


其 中 ，n 用 来 填写 缩 进 的 距离 。 在 填写 缩 进 距离 的 时 候 ， 记 得 要 写 上 距离 的 单位 。 
【示例 13.11】 下 面 是 使 用 text-indent 属性 来 设置 文本 缩 进 的 效果 。 代 码 如 下 : 


<table border="1"> 
<tr> 
<td width="250px" height="90" style="text-indent:20px;"> 设 置 首 行 缩 进 为 
20px 设置 首 行 缩 进 为 20px 设置 首 行 缩 进 为 20px 设置 首 行 缩 进 为 20px </td> 
<!-- 使 用 内 媒 样 式 表 设 置 文本 首 行 缩 进 20px--> 
WE 
</table> 


效果 如 图 13.11 所 示 。 


全 了 C 甬 filey///F:/bj/ 示 例 /第 13 章 / 安 以 


设置 首 行 缩 进 为 20px 设 置 首 行 缩 
进 为 20px 设 置 首 行 缩 进 为 20px 设 置 
首 行 缩 进 为 20px 


图 13.11 使 用 text-indent 属性 设置 文本 缩 进 效果 图 


13.2.7 转换 大 小 写 text-transform 


转换 大 小 写 用 来 定义 英文 字体 的 大 小 写 之 间 的 转换 , 可 以 通过 text-transform 属性 来 进 
行 设置 。text-transform 属性 具有 三 个 属性 值 ，capitalize、uppercase 和 lowercase。 其 语法 结 
构 如 下 : 


text-transform:capitalize/uppercase/lowercase; /* 设 置 英 文字 体 大 小 写 转换 */ 


当 text-transform:capitalize; 时 ， 表 示 将 每 个 英文 单词 第 一 个 字母 设置 成 大 写 。 当 
text-transform:uppercase; 时 , 表示 将 每 个 英文 单词 都 转换 成 大 写 。 当 text-transform:lowercase; 
时 ， 表 示 将 每 个 英文 单词 都 转换 成 小 写 。 

【示例 13.12】 下 面 是 使 用 text-transform 属性 来 转换 英文 字体 大 小 写 的 效果 。 代 码 
如 下 : 


<p style="text-transform:capitalize;" width="250px"; height="90px"> 英 文 单 
词 第 一 个 字母 为 大 写 : night hello name tag</p> 
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<!-- 将 每 个 英文 单词 第 一 个 字母 设置 成 大 写 --> 
<p style="text-transform:uppercase;" width="250px"; height="90px"> 每 个 英文 
单词 都 为 大 写 : content hello name tag </p> <!-- 将 每 个 英文 单词 都 设置 成 大 写 --> 
<p style="text-transform:lowercase;" width="250px"; height="90px"> 每 个 英文 
单词 都 为 小 写 : content hello name tag </p> <!- 将 每 个 英文 单词 都 设置 成 小 写 --> 


效果 如 图 13.12 所 示 。 


eel 
全 沪 C 在 @file/W/FVbj/ 示 例 /第 13 童 /13.12.html 家 本 
英文 单词 第 一 个 字母 为 大 写 : Night Hello Name Tag 
每 个 英文 单词 都 为 大 写 : CONTENT HELLO NAME TAG 
每 个 英文 单词 都 为 小 写 : content hello name tag 


@ y 


图 13.12 ”使 用 text-transform 属性 设置 英文 单词 大 小 写 转换 效果 图 


外 说 明 : text-transform 属性 在 网 站 制作 中 ， 较 少 被 使 用 到 。 当然， 在 设计 师 对 网 站 内 容 有 
所 要 求 的 情况 下 ， 它 将 会 是 一 个 很 好 的 帮手 。 


13.2.8 控制 文本 换行 white-space 


控制 文本 换行 是 指 当 文本 内 容 超出 框架 宽度 时 ， 是 否 让 它 自动 换行 。 可 以 通过 
white-space 属性 来 进行 设置 。white-space 属性 具有 三 个 属性 值 : normal、pre 和 nowarp。 
语法 形式 如 下 : 

white-space:normal/pre/nowrap; /* 控 制 文本 换行 */ 


当 white-space:normal; 时 ， 表 示 按 照 浏览 器 默认 的 处 理 方式 ， 当 white-space:pre: 时 ， 表 
示 用 等 宽 字 体 来 显示 文本 内 容 ， 这 使 得 文本 内 容 出 现在 同一 行 ， 强 行 控 制 不 换行 ， 当 
white-space:nowrap: 时 ， 表 示 当 文本 内 容 超出 框架 宽度 时 ， 强 行 控制 不 换行 ， 直 到 遇 到 换行 
符号 。pre 属性 值 和 nowrap 属性 值 在 使 用 上 的 显示 效果 是 一 样 的 。 
【示例 13.13】 下 面 是 使 用 white-space 属性 来 控制 文本 换行 的 效果 。 代 码 如 下 : 
<div style="border:2px solid#000000;white-space:normal; width:200px;"> 设 
置 文 本 按 浏 览 器 默认 的 方式 换行 设置 文本 按 浏 览 器 默认 的 方式 换行 设置 文本 按 浏 览 器 默认 的 方式 换 
行 </div> <! 一 设置 文本 按照 浏览 器 默认 的 处 理 方式 换行 --> 


<br /> 
<div style="border:2px solid#000000;white-space:pre; width:200px;"> 强 制 文 
本 不 换行 强制 文本 不 换行 强制 文本 不 换行 强制 文本 不 换行 强制 文本 不 换行 </div> 

<!-- 使 用 div 嵌 套 行内 样式 表 设 置 文本 折 行 ， 用 等 宽 字 体 来 显示 文本 内 容 --> 


<bR > 

a style="border:2px solid#000000; white-space:nowrap; width:200px;"> 

强制 文本 不 换行 ， 直 到 遇 到 换行 符号 强制 文本 不 换行 <bz/> 直 到 遇 到 换行 符号 </div> 
<!-- 设 置 文本 折 行 ， 当 文本 内 容 超 出 框架 宽度 时 ， 强 行 控制 不 换行 ， 直 到 遇 到 换行 符号 --> 
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13. 


二 


效果 如 图 13.13 所 示 。 


f 


CH [TREE ET 
设置 文本 按 浏览 器 默认 的 方 

式 换 行 设置 文本 技 浏 览 器 默 

认 的 方式 换行 设置 文本 按 浏 

鉴 器 默认 的 方式 换行 


强制 文本 不 换行 强制 文本 不 换行 强制 文本 不 换行 强制 文本 不 换行 强制 文本 不 换行 


经 制 文本 不 换行 ， 直 到 遇 到 排行 符号 强制 文本 不 换行 
到 过 到 换行 符号 


图 13.13 ”使 用 white-space 属性 控制 文本 折 行 效果 图 


2.9 字体 大 小 font-size 


设置 字体 的 大 小 在 前 面 已 经 接触 过 很 多 了 , 在 CSS 中 使 用 font-size 属性 来 设置 字体 大 
其 语法 结构 如 下 : 
font-size:n; /* 设 置 字体 大 小 */ 


其 中 ，n 用 来 填写 字体 的 大 小 。 
【示例 13.14】 下 面 是 使 用 font-size 属性 来 设置 字体 大 小 的 效果 。 代 码 如 下 : 
<div style="font-size:12px;"> 设 置 字体 大 小 为 12px</div> 
<!-- 设 置 字体 大 小 为 12px--> 


<div style="font-size:20px;"> 设 置 字 体 大 小 为 20px</div> 
<!-- 设 置 字体 大 小 为 20px--> 


<div style="font-size:30px;"> 设 置 字体 大 小 为 30px</div> 
<!-- 设 置 字体 大 小 为 30px--> 


效果 如 图 13.14 所 示 。 


加 csskz x 
后 言 C 省 昌 filey//Fybj/ 示 例 /第 13 宣 /13.1 安 入 
设置 字体 大 小 为 12px 


设置 字体 大 小 为 20px 
设置 字体 大 小 为 30px 


图 13.14 ”使 用 font-size 属性 设置 字体 大 小 效果 图 


全 注意 : 设置 字体 大 小 时 ， 注 意 不 要 使 用 单数 ， 因 为 在 浏览 器 上 ，IE 是 不 认 单 数 的 ， 它 会 


自动 地 把 设置 好 的 单数 加 一 个 字号 ， 变 成 双 数 。 
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13.2.10 选择 字体 font-family 


选择 字体 也 就 是 选择 文本 内 容 中 的 字体 的 风格 ， 例 如 宋体 、 黑 体 、 楷 体 等 。 
font-family 属性 来 进行 设置 。 其 语法 结构 如 下 : 

font-family:n; /* 设 置 字体 风格 */ 

其 中 ，n 是 用 来 填写 字体 风格 的 。font-family 属性 可 以 一 次 定义 多 种 字体 ， 
之 间 使 用 英文 逗号 “,” 隔 开 ， 浏 览 器 将 按照 字体 定义 的 顺序 选择 使 用 的 字体 。 


可 以 通过 


每 种 字体 


【示例 13.1S】 下 面 是 使 用 font-family 属性 来 设置 字体 风格 的 效果 。 代 码 如 下 : 


<div style="font-family: 黑 体 ;font-size:25px"> 字 体 为 黑体 </div> 
<!-- 设 置 字体 风格 为 黑体 --> 
<div style="font-family: 宋 体 ;font-size:25px"> 字 体 为 宋体 </div> 
<!-- 设 置 字体 风格 为 宋体 --> 


效果 如 图 13.15 所 示 。 


| Dcssere 
| > cn Grewal | 


字体 为 黑体 
字体 为 宋体 


图 13.15 ”使 用 font-family 属性 设置 字体 风格 效果 图 


13.3 CSS 边框 属性 


边框 是 用 来 分 割 元 素 与 元 素 的 属性 ， 通 过 边框 可 以 很 直观 地 区 分 出 每 个 元 素 。 在 前 面 
已 经 学 过 表格 的 边框 ， 在 CSS 样式 中 也 同样 有 边框 。 而 且 CSS 里 的 边框 比 表格 的 边框 多 


出 了 一 些 属性 ， 让 边框 更 加 多 元 化 。 


13.3.1 边框 样式 border-style 


border-style 属性 可 以 用 来 设置 边框 的 样式 。 常 用 的 border-style 属性 具有 6 个 属性 值 : 


solid、double、groove、Tridge、inset 和 outset。 其 语法 结构 如 下 : 


border-style:solid/double/groove/ridge/inset/outset;  /* 设 置 边框 样式 */ 


条 为 双 线 ， 两 条 单线 中 间 的 距离 等 于 指定 的 边框 宽度 border-width 属性 


当 border-style:solid; 时 ， 表 示 边 框 线 条 为 实 线 ;， 当 border-style:double: 时 ， 表 示 边 框 线 


的 值 ， 当 


border-style:groove; 时 ， 表 示 根 据 边 框 颜色 border-color 属性 的 值 (将 在 下 小 节 


解 ) 画 出 


3D 四 槽 的 线条 ;， 当 border-style:ridge: 时 ， 表 示 根 据 边 框 颜 色 border-color 属性 的 值 画 出 葵 
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形 边框 ; 当 border-style:inset; 时 ， 表 示 根 据 边 框 颜色 border-color 属性 的 值 画 出 3D 凹 边 ; 
当 border-style:outset 时 ， 表 示 根 据 边 框 颜色 border-color 属性 的 值 画 出 3D 凸 边 。 

【示例 13.16】 下 面 是 使 用 border-style 属性 来 设置 边框 样式 的 6 种 效果 。 为 了 使 效果 更 
明显 ， 这 里 添加 了 文字 ， 设 置 了 宽度 、 高 度 、 换 行 标签 和 边框 颜色 〈 边 框 颜色 将 在 下 小 节 
讲解 ) 。 代 码 如 下 : 


实 线 边框 : <br /> 

<div style="border-style: solid; border-color:#00ffff ; width:200px; height: 
30px; "></div> 

<! 一 -定义 实 线 边框 、 边 框 颜 色 ， 设 置 总 体 的 宽度 和 高 度 --> 

<br /> 双 线 边框 :<br /> 

<div style="border-style:double; border-color:#ff0000 ; width:200px; 
height:30px; border-width:10px;"></div> 

<!-- 定 义 双 线 边框 ， 添 加 边框 颜色 ， 设 置 总 体 的 宽度 和 高 度 ， 设 置 边框 宽度 --> 

<br /> 

3D 凹 槽 边框 : <br /> 

<div style="border-style:groove; border-color: #9933ff; width:200px; 
height:30px; border-width:10px;"></div> 

<! 一 -定义 3D 凹 槽 的 线条 ， 添 加 边框 颜色 ， 设 置 总 体 的 宽度 和 高 度 ， 设 置 边 框 宽度 --> 

<br /> 萎 形 边框 : <br /> 

<div style="border-style:ridge; border-color:#ff00ff; width:200px; 
height:30px; border-width:10px;"></div> 

<! 一 -定义 菱形 边框 ， 添 加 边框 颜色 ,设置 总 体 的 宽度 和 高 度 ， 设 置 边 框 宽度 --> 

<br />3D 冲 边 ; <br /> 

<div style="border-style:inset; border-color:#ffffff; width:200px; height: 
30px; border-width:10px;"></div> 

<! 一 定义 3D 凹 边 ， 添 加 边框 颜色 ， 设 置 总 体 的 宽度 和 高 度 ， 设 置 边框 宽度 --> 

<br />3D wu <bel/> 

<div style="border-style:outset; border-color:#ff0000; width:200px; height: 
30px; border-width:10px;"></div> 

<! 一 定义 3D 凸 边 ， 添 加 边框 颜色 ,设置 总 体 的 宽度 和 高 度 ， 设 置 边 框 宽度 --> 


效果 如 图 13.16 所 示 。 


ES 
7 Ocssmx 
言 G 痢 | fileyWF/bj/ 示 例 第 3 间 /13.16h 安 入 


实 线 边框 : 


双 线 边框 : 


30 凹 楼 边框: 


获 形 边框 
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图 13.16 使 用 border-style 属性 设置 边框 样式 效果 图 
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13.3.2 边框 颜色 border-color 


通过 border-color 属性 可 以 用 来 设置 边框 的 颜色 ， 和 HTML 表格 中 bordercolor 属性 的 
用 法 是 一 样 的 。 其 语法 结构 如 下 : 
border-color:# 边 框 颜色 ; /* 设 置 边框 颜色 */ 


其 中 ，# 后 面 用 来 填写 边框 的 颜色 。 颜 色 的 书写 格式 和 HTML 表格 中 bordercolor 属性 
的 书写 格式 是 一 样 的 。 
【示例 13.17】 下 面 是 使 用 border-color 属性 来 设置 边框 颜色 的 效果 。 代 码 如 下 : 


<div style="border-style:solid; border-color:#00ff00 ; width:200px; height: 
30px; "> 边框 颜色 为 绿色 </div> 
<! 一 -定义 实 线 边框 ， 设 置 边框 颜色 为 绿色 ,设置 总 体 的 宽度 和 高 度 --> 


效果 如 图 13.17 所 示 。 


5 CC 本 Ofile///F:/bj/ 示 例 { 安 入 


边框 颜色 为 绿色 


图 13.17 使 用 border-color 属性 设置 边框 颜色 效果 图 


border-color 属性 有 一 点 和 bordercolor 属性 不 同 的 是 ，border-color 属性 可 以 同时 设置 
四 个 值 来 分 别 表示 四 条 边框 的 颜色 。 当 border-color 属性 设置 了 四 个 值 ， 四 个 值 将 会 按照 
顺 时 针 方 向 对 四 条 边框 进行 填充 颜色 ， 分 别 是 上 - 右 - 下 - 左 ; 当 border-color 属性 设置 了 三 
个 值 ， 第 一 个 用 于 填充 上 边框 ， 第 二 个 用 于 填充 左边 框 和 右边 框 ， 第 三 个 用 于 填充 下 边框 ; 
当 border-color 属性 设置 了 两 个 值 ， 第 一 个 用 于 填充 上 边框 和 下 边框 ， 第 二 个 用 于 填充 左 
边框 和 右边 框 。 
名 说明: 所 有 的 边框 使 用 的 顺序 都 是 顺 时 针 排 序 的 。 


13.3.3 边框 宽度 border-width 


border-width 属性 可 以 用 来 设置 边框 的 宽度 ， 和 HTML 表格 中 border 属性 的 用 法 是 一 
样 的。 其 语法 结构 如 下 : 


border-width: 边 框 宽度 ; /* 设 置 边 框 宽度 */ 
【示例 13.18】 下 面 是 使 用 border-width 属性 来 设置 边框 宽度 的 效果 。 代 码 如 下 : 


<div style="border-style:solid; border-color:#ffff33; width:200px; 
height:30px; border-width:5px;"> 边 框 宽度 为 5px </div> 
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<! 一 -定义 边框 为 实 线 ， 设 置 总 体 的 宽度 和 高 度 ， 设 置 边框 宽度 为 5px--> 

<div style="border-style:solid; border-—color:#ff00ff; width:200px; 
height:30px; border-width:10px;"> 边 框 宽度 为 1]0px</div> 

<! 一 -定义 边框 为 实 线 ， 设 置 总 体 的 宽度 和 高 度 ， 设 置 边框 宽度 为 10px--> 


效果 如 图 13.18 所 示 。 


| © cs x 
$C Ofiley///F/bj/ 示 例 /i 安 外 


图 13.18 ”使 用 border-width 属性 设置 边框 宽度 效果 图 


13.3.4 设置 上 边框 border-top 


border-top 属性 是 用 来 只 显示 边框 的 上 边框 的 。border-top 属性 可 以 把 上 面 讲 过 的 各 种 
设置 边框 的 属性 合 在 一 起 进行 控制 ， 只 需要 在 每 个 属性 值 中 间 用 英文 的 空格 号 隔 开 。 语 法 
形式 如 下 : 

border-top: 属 性 值 1 属性 值 2 属性 值 3..…; /* 设 置 上 边框 */ 

其 中 ， 每 种 属性 值 的 写法 要 和 之 前 讲述 边框 属性 里 的 属性 值 的 写法 一 样 ， 这 样 才 可 以 
产生 效果 。 

【示例 13.19】 下 面 是 使 用 border-top 属性 来 设置 上 边框 的 效果 。 代 码 如 下 : 


显示 上 边框 <br/><br/> 
<div style="border-top: ridge 10px #00ffff; width:300px "></div> 
<!-- 定 义 上 边框 的 样式 、 宽 度 、 颜 色 --> 


效果 如 图 13.19 所 示 。 


6 访 C 省 filey//F:/bj/ 示 例 /第 13 意 /13 安 以 
显示 上 边框 


图 13.19 ”使 用 border-top 属性 设置 上 边框 效果 图 
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13.3.5 设置 右边 框 border-right 


border-right 属性 是 用 来 只 显示 边框 的 右边 框 。 它 和 上 边框 border-top 属性 一 样 ， 都 可 
以 把 不 同 的 属性 值 全 部 放 在 一 起 ， 对 右边 框 进行 声明 。 其 语法 格式 如 下 : 

border-right: 属性 值 1 属性 值 2 属性 值 3.…7 /* 设 置 右边 框 */ 

其 中 ， 每 种 属性 值 的 写法 要 和 之 前 讲述 边框 属性 里 的 属性 值 的 写法 一 样 ， 这 样 才 可 以 
产生 效果 。 

【示例 13.20】 下 面 是 使 用 border-right 属性 来 设置 右边 框 的 效果 。 代 码 如 下 : 


显示 右边 框 <br/><br/> 
<div style="border-right: ridge 10px #00ffff; width:300px; height: 
50px"></div> <!-- 定 义 右 边框 的 样式 、 宽 度 、 颜 色 --> 


效果 如 图 13.20 所 示 。 


fr 


后 了 CG 作 filey//F:/bj/ 示 例 并 窑 以 
显示 右边 框 


是 


图 13.20 ”使 用 border-right 属性 设置 右边 框 效果 图 


13.3.6 ”设置 下 边框 border-bottom 


border-bottom 属性 是 用 来 只 显示 边框 的 下 边框 。 它 和 上 边框 border-top 属性 一 样 ， 都 
可 以 把 不 同 的 属性 值 全 部 放 在 一 起 ， 对 下 边框 进行 声明 。 其 语法 格式 如 下 : 

border-bottom: 属性 值 1 属性 值 2 属性 值 3.: /* 设 置 下 边框 */ 

其 中 ， 每 种 属性 值 的 写法 要 和 之 前 讲述 边框 属性 里 的 属性 值 的 写法 一 样 ， 这 样 才 可 以 
产生 效果 。 

【示例 13.21】 下 面 是 使 用 border-bottom 属性 来 设置 下 边框 的 效果 。 代 码 如 下 : 


显示 下 边框 <br/><br/> 
<div style="border-bottom: ridge 10px #00ffff; width:300px;height: 
70px"></div> <!-- 定 义 下 边框 的 样式 、 宽 度 、 颜 色 --> 


效果 如 图 13.21 所 示 。 
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@ csstt x 
后 六 CG 俐 | filey//F/bj/ 示 例 /第 13 童 /1: 窑 | 以 


显示 下 边框 


图 13.21 使 用 border-bottom 属性 设置 下 边框 效果 图 


13.3.7 ”设置 左边 框 border-left 


border-left 属性 是 用 来 只 显示 边框 的 左边 框 。 它 和 上 边框 border-top 属性 一 样 ， 都 可 以 
把 不 同 的 属性 值 全 部 放 在 一 起 ， 对 左边 框 进行 声明 。 其 语法 格式 如 下 : 

border-left: 属性 值 1 属性 值 2 属性 值 3...; /* 设 置 左边 框 */ 

其 中 ， 每 种 属性 值 的 写法 要 和 之 前 讲述 边框 属性 里 的 属性 值 的 写法 一 样 ， 这 样 才 可 以 

【示例 13.22】 下 面 是 使 用 border-left 属性 来 设置 左边 框 的 效果 。 代 码 如 下 : 


显示 左边 框 <br/><br/> 
<div style="border-left: ridge 10px #00ffff; width:300px; height:50px"> 
</div> <!-- 定 义 左边 框 的 宽度 、 样 式 、 颜 色 --> 


效果 如 图 13.22 所 示 。 


| © csp x 
CH 加 filey//F/bj/ 示 例 避 窑 ~ 
显示 左边 框 


图 13.22 ”使 用 border-left 属性 设置 左边 框 效果 图 


全 技巧 : 如 果 需 要 对 每 个 单独 的 边框 做 修饰 的 话 ， 可 以 在 样式 表 里 用 上 面 说 的 四 个 属性 一 
起 设置 。 


13.3.8 综合 声明 边框 border 
综合 声明 边框 border 属性 是 用 来 把 上 面 所 讲 到 的 不 同 的 属性 值 全 部 放 在 一 起 ， 对 四 个 


边框 的 颜色 、 样 式 、 宽 度 一 起 进行 声明 。 在 声明 的 时 候 ， 只 需要 在 每 个 属性 值 中 间 用 英文 
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的 空格 号 隔 开 。 其 语法 结构 如 下 : 

border :各 种 属性 值 : /* 综 合 声明 边框 */ 

其 中 ， 每 种 属性 值 的 写法 要 和 之 前 讲述 边框 属性 里 的 属性 值 的 写法 一 样 ， 这 样 才 可 以 
产生 效果 5 

【示例 13.23】 下 面 是 使 用 border 属性 来 设置 边框 的 效果 。 代 码 如 下 : 

综合 设置 边框 : 


<div style="border: ridge 10px #00ffff; width:300px; height:50px; "> </div> 
<!-- 定 义 边框 的 宽度 、 样 式 、 颜 色 ， 增 加 了 宽度 和 高 度 --> 


效果 如 图 13.23 所 示 。 


= ee = 
© cssk 式 = 

全 言 C 帮 filey///F:/bj/ 示 例 /第 13 章 /13.23.ht 安 以 
综合 设置 边框 : 


图 13.23 ”使 用 border 属性 设置 边框 效果 图 


13.4 CSS 外 边 距 


外 边 距 是 指 用 标签 设置 的 内 容 外 部 的 边 距 ， 不 被 标签 计算 在 内 的 距离 。 通 过 外 边 距 属 
性 使 得 元 素 之 间 有 一 定 的 距离 ,从 而 将 元 素 有 效 地 区 分 开 。 由 于 外 边 距 不 被 计算 在 标签 内 ， 
所 以 通过 外 边 距 来 设置 的 元 素 ， 可 以 很 好 地 将 元 素 和 旁边 的 其 他 元 素 隔 开 。 本 节 将 详细 讲 
述 CSS 外 边 距 的 设置 。 


13.4.1 居中 auto 


使 用 auto 属性 值 可 以 将 整个 被 包含 在 内 的 内 容 水 平 居中 , 这 和 align="center" 属 性 值 有 
些 相似 。 居 中 auto 是 外 边 距 一 个 比较 特殊 的 属性 值 ， 通 过 margin 属性 来 进行 设置 。 需 要 
注意 的 是 ， 使 用 auto 属性 值 来 对 内 容 进 行 居中 ， 必 须 准确 填写 内 容 的 总 体 宽 度 ，auto 属性 
值 是 以 填写 的 宽度 为 居中 的 标准 。 语 法 形式 如 下 : 

margin:0 auto; /* 设 置 居中 */ 


此 用 法 是 一 个 固定 格式 ， 第 一 个 0 是 表示 上 下 边 距 为 0，auto 表示 左右 根据 窗口 大 小 
相对 居中 。 

【示例 13.24】 下 面 是 使 用 居中 auto 属性 值 来 显示 页 面 的 效果 。 这 里 将 使 用 内 部 样式 表 
来 作为 CSS 样式 的 连接 。 为 了 使 效果 更 明显 ， 添 加 了 文字 并 设置 宽度 、 高 度 。 代 码 如 下 : 
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<head> 

<title>CSS 样式 </title> 

<style> 

< 

-margn 

. 
border:solid 2px #00ffff; 
margin:0 auto; /* 设 置 居中 */ 
width:300px; /* 设 置 宽度 */ 
height:200px; /* 设 置 高 度 */ 

4 

一 -> 

</style> 

</head> 

<body> 

定义 居中 : 

<div class="margn"> 定 义 居中 </div> <!-- 用 绑 定 了 的 类 选择 器 显示 内 部 样式 表 效 果 --> 

</body> 

</html> 


效果 如 图 13.24 所 示 。 
Oct \ 


CQ 组 @fileVWFVbj/ 示 例 /第 13 章 /13.24.html 安装 
定义 居中 : 


左右 居中 


图 13.24 使 用 居中 auto 属性 值 显示 页 面 效果 图 


13.4.2 上 外 边 距 margin-top 


通过 margin-top 属性 可 以 设置 上 外 边 距 ， 也 就 是 使 标签 内 的 内 容 与 上 面 的 其 他 文本 内 
容 隔 开 一 定 的 距离 。 其 语法 结构 如 下 : 
margin-top:n; /* 设 置 上 外 边 距 */ 


其 中 ，n 是 用 来 填写 距离 的 大 小 。 

【示例 13.25】 下 面 是 使 用 margin-top 属性 来 设置 上 外 边 距 的 具体 效果 。 这 里 将 使 用 内 
部 样式 表 来 作为 CSS 样式 的 连接 。 为 了 使 效果 更 明显 ,添加 了 文字 并 设置 宽度 、 高 度 。 代 
人 码 如 下 : 


<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 13.25</title> 
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<style> 

SU 

#margn 

. 
border:solid 2px #00ffff; 
margin-top:50px; /* 设 置 上 外 边 距 */ 
width:200px; /* 设 置 宽度 */ 
height:100px; /* 设 置 高 度 */ 

3 

一 -> 

</style> 

</head> 

<body> 

定义 上 外 边 距 : 

<div id="margn"></div> <!-- 用 绑 定 了 的 id 选择 器 显示 内 部 样式 表 效果 --> 

</body> 

</html> 


效果 如 图 13.25 所 示 。 


[= ® km) 
yy Dam1325 x 展 


CG 从 [Dfiley//F/bj/t 级 /好 | 三 | 
定义 上 外 边 距 : 
上 am 


一 


图 13.25 ”使 用 margin-top 属性 设置 上 外 边 距 效 果 图 


13.4.3 右 外 边 距 margin-right 


通过 margin-right 属性 可 以 设置 右 外 边 距 ， 也 就 是 使 标签 内 的 内 容 与 右边 的 其 他 文本 
内 容 隔 开 一 定 的 距离 。 其 语法 结构 如 下 : 
margin-right:n; /* 设 置 右 外 边 距 */ 


其 中 ，n 是 用 来 填写 距离 的 宽度 。 

【示例 13.26】 下 面 是 使 用 margin-right 属性 来 设置 右 外 边 距 的 具体 效果 。 这 里 将 使 用 
内 部 样式 表 来 作为 CSS 样式 的 连接 。 为 了 使 效果 更 明显 ,添加 了 文字 、 宽 度 、 高 度 和 有 边 
框 的 表格 。 代 码 如 下 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 

WWW.w3.0org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 13.26</title> 
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<style> 

es 

#margn 

{ 
border:solid 2px #00ffff; 
margin-right:50px; /* 设 置 右 外 边 距 */ 
width:200px; /* 设 置 宽度 */ 
height:100px; /* 设 置 高 度 */ 

了 

一 -> 

</style> 

</head> 

<body> 

<table width="200px" border="1" cellspacing="0" cellpadding="0"> 

4 
<td> 
<div id="margn"></div> <!-- 用 绑 定 了 的 id 选择 器 显示 内 部 样式 表 效 果 --> 
</td> 
<td> 定 义 右 外 边 距 离 </td> 
<AEr> 

</table> 

</body> 

</html> 


效果 如 图 13.26 所 示 。 


om “加 


言 CG 首 @file///FVbj/ 示 例 /第 13 童 /13.26.html 安装 


右 外 边界 50p 
| 


定义 右 外 边 距离 


图 13.26 ”使 用 margin-right 属性 设置 右 外 边 距 效 果 图 


名 说明: 在 有 表格 的 时 候 ， 也 可 以 在 表格 里 使 用 外 边 距 。 


13.4.4 下 外 边 距 margin-bottom 


通过 margin-bottom 属性 可 以 设置 下 外 边 距 ， 也 就 是 使 标签 内 的 内 容 与 下 边 的 其 他 文 
本 内 容 隔 开 一 定 的 距离 。 其 语法 结构 如 下 : 

margin-bottom:n; /* 设 置 下 外 边 距 */ 

其 中 ,，n 是 用 来 填写 距离 的 高 度 。 

【示例 13.27】 下 面 是 使 用 margin-bottom 属性 来 设置 下 外 边 距 的 效果 。 这 里 将 使 用 内 
部 样式 表 来 作为 CSS 样式 的 连接 。 为 了 使 效果 更 明显 , 添加 了 文字 并 设置 宽度 、 高 度 和 有 
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边框 的 表格 。 代 码 如 下 : 


效果 如 图 13.27 所 示 。 


图 13.27 使 用 margin-bottom 属性 设置 下 外 边 距 效果 图 
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13.4.5 ” 左 外 边 距 margin-left 


通过 margin-eft 属性 可 以 设置 左 外 边 距 ， 也 就 是 使 标签 内 的 内 容 与 左边 的 其 他 文本 内 
容 隔 开 一 定 的 距离 。 其 语法 结构 如 下 : 
margin-left:n; /* 设 置 左 外 边 距 */ 


其 中 ，n 是 用 来 填写 距离 的 宽度 。 

【示例 13.28】 下 面 是 使 用 margin-left 属性 来 设置 左 外 边 距 的 效果 。 这 里 将 使 用 内 部 样 
式 表 来 作为 CSS 样式 的 连接 。 为 了 使 效果 更 明显 ,添加 了 文字 并 设置 宽度 、 高 度 和 有 边框 
的 表格 。 代 码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 
WWW.W3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.0org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 13.28/title> 

<style> 

l= 


#margn{ 
border:solid 2px #00ffff; 
margin-left:70px; /* 设 置 左 外 边 距 */ 
width:200px; /* 设 置 宽度 */ 
height:150px; /* 设 置 高 度 */ 

. 

--> 

</style> 

</head> 

<body> 

<table width="400px" border="1"” > 

<tr> 
<td> 
定义 左 外 边 距 
</td> 
六 二 可 > 
<div id="margn"></div> <!-- 用 绑 定 了 的 id 选择 器 显示 内 部 样式 表 效果 --> 
</ta> 
过 /LEY> 
</table> 


</body> 
</html> 


效果 如 图 13.28 所 示 。 


全 注意 : 外 边 距 是 不 被 标签 里 的 宽度 和 高 度 计算 在 内 的 。 所 以 在 使 用 时 ， 要 记得 预 留 出 外 
边 距 的 宽度 和 高 度 。 
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二 大 本 | 
D AN13.28 人 
CG 从 [ETEEE ET 人 | 入 四 


左 外 边界 70px 
定义 左 外 边 距 一 一 一 


图 13.28 ”使 用 margin-left 属性 设置 左 外 边 距 效果 图 


13.4.6 ”综合 声明 外 边 距 margin 


合 声明 外 边 距 和 综合 声明 边框 的 用 法 一 样 , 它 是 通过 margin 属性 来 把 上 面 讲 过 的 四 
个 不 | te 串 放 在 一 起 ， 对 四 个 外 边 距 一 起 进行 声明 的 。 只 需要 在 每 个 属性 
值 中 间 用 英文 的 空 E 格 号 隔 开 。 其 语法 结构 如 下 : 


margin: 各 种 属性 值 ; /* 综 合 声明 外 边 距 */ 


其 中 , margin 属性 可 以 同时 设置 四 个 值 来 分 别 表示 四 个 外 边 距 的 样式 。 当 margin 属性 
设置 了 四 个 值 ， 四 个 值 将 会 按照 顺 时 针 方向 对 四 个 外 边 距 进行 设置 ， 分 别 是 上 - 右 - 下 - 左 ; 
当 margin 属性 设置 了 三 个 值 , 第 一 个 用 于 设置 上 外 边 距 , 第 二 个 用 于 设置 左 外 边 距 和 右 外 
边 距 ， 第 三 个 用 于 设置 下 外 边 距 ， 当 margin 属性 设置 了 两 个 值 ， 第 一 个 用 于 设置 上 外 边 距 
和 下 外 边 距 ， 第 二 个 用 于 设置 左 外 边 距 和 右 外 边 距 。 

【示例 13.29】 下 面 是 使 用 margin 属性 来 综合 设置 外 边 距 的 效果 。 这 里 将 使 用 内 部 样式 
表 来 作为 CSS 样式 的 连接 。 为 了 使 效果 更 明显 ， 添 加 了 有 边框 的 文字 并 设置 宽度 、 高 度 和 
表格 。 代 码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 
WWW.W3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.o0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 13.29</title> 

<style type="text/css"> 


A 
#margl 
{ 
border:solid 2px #00ffff; 
margin:30px 70px; /* 综 合 声明 上 、 下 外 边 距 为 30px， 左 、 右 外 边 距 为 70px*/ 
width:100px; 
height:50px; 
} 
#marg2 


' 
border:solid 2px #00ffff; 
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效果 如 图 13.29 所 示 。 


[ * | 
3 C Ofle///F/bj/ 趟 全/ 芋 13 宫 /13.29.ht 窑 


图 13.29 使 用 margin 属性 综合 设置 外 边 距 效果 图 


Ee 
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1 图 13.29 可 以 看 出 , 1 中 带 边框 的 文字 的 上 、 下 外 边 距 为 30px, 左 、 右 外 边 距 为 70px; 
2 中 带 边框 的 文字 的 上 外 边 距 为 30px， 左 、 右 外 边 距 为 60px， 下 外 边 距 为 40px; 3 中 带 边 
框 的 文字 的 上 外 边 距 为 30px， 右 外 边 距 为 50px， 下 外 边 距 为 30px， 左 外 边 距 为 40px。 


外 技巧 : 使 用 margin 属性 可 以 很 好 地 设置 段落 与 段落 之 间 的 距离 ， 代 替 了 多 个 换行 标签 
的 使 用 效果 。 


13.5 CSS 内 边 距 


内 边 距 和 外 边 距 刚好 相反 。 内 边 距 是 指 用 标签 设置 的 内 容 内 部 的 边 距 ， 是 被 标签 计算 
在 内 的 距离 。 通 过 内 边 距 ， 可 以 很 好 地 规定 元 素 在 标签 设置 的 内 部 的 显示 位 置 。 本 节 将 详 
细 讲 述 CSS 内 边 距 的 设置 


13.5.1 上 内 边 距 padding-top 


通过 padding-top 属性 可 以 设置 上 内 边 距 , 也 就 是 标签 设置 的 元 素 内 的 内 容 与 元 素 顶 部 
的 距离 。 其 语法 结构 如 下 : 


padding-top:n; /* 设 置 上 内 边 距 */ 


其 中 ，n 是 用 来 填写 距离 的 高 度 。 

【示例 13.30】 下 面 是 使 用 padding-top 属性 来 设置 上 内 边 距 的 效果 。 这 里 将 使 用 内 部 样 
式 表 来 作为 CSS 样式 的 连接 。 为 了 使 效果 更 明显 ， 添 加 了 文字 并 设置 宽度 和 高 度 。 代 码 
如 下 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 

WWW.W3.0rg/TR/xhtml1/DTD/xhtmll-transitional .dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 


<title> 示 例 13.30</title> 
<style type="text/css"> 


border:solid 2px #00ffff; 

padding-top:70px; /* 设 置 上 内 边 距 */ 
width:200px; /* 设 置 宽度 */ 
height:150px; /* 设 置 高 度 */ 


一 -> 

</style> 

</head> 

<body> 

定义 上 内 边 距 : 

<div class="padd"> 设 置 上 内 边 距 </div> <!-- 用 绑 定 了 的 类 选择 器 显示 样式 效果 --> 
</body> 

</html> 
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效果 如 图 13.30 所 示 。 


上 内 边 距 70px 


定义 上 内 边 距 


图 13.30 ”使 用 padding-top 属性 设置 上 内 边 距 效 果 图 


13.5.2 ” 右 内 边 距 padding-right 


通过 padding-right 属性 可 以 设置 右 内 边 距 ， 也 就 是 标签 设置 的 元 素 内 的 内 容 与 元 素 右 
边 的 距离 。 其 语法 结构 如 下 : 
padding-right:n; /* 设 置 右 内 边 距 */ 


其 中 ，n 用 来 填写 距离 的 大 小 。 

【示例 13.31】 下 面 是 使 用 padding-right 属性 来 设置 右 内 边 距 的 效果 。 这 里 将 使 用 内 部 
样式 表 来 作为 CSS 样式 的 连接 。 为 了 使 效果 更 明显 ， 添 加 了 文字 并 设置 宽度 和 高 度 。 代 码 
如 下 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 

WWW.W3.0rg/TR/xhtml1/DTD/xhtmll-transitional .dtd"> 

<html xmlns="http://www.w3.0org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 


<title> 示 例 13.31</title> 
<style type="text/css"> 


SL 

#padd 

! border:solid 2px #00ffff; 
padding-right:70px; /* 设 置 右 内 边 距 */ 
text-align:right; /* 设 置 内 容 居 右 */ 
width:300px; /* 设 置 宽度 */ 
height:200px; /* 设 置 高 度 */ 

je 

</style> 

</head> 

<body> 


<div id="padd"> 定 义 右 内 边 距 </div> <!-- 用 绑 定 了 的 id 选择 器 显示 样式 效果 --> 
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</body> 
</html> 


效果 如 图 13.31 所 示 。 


Y 口 地 1331 x 全 


CG 人 给 Dfile:///F:/bj/ 升 级 /雪上 志 起 学 VY? 三 
定义 右 内 边 焉 所 一》 
右 内 边 距 70px 


图 13.31 使 用 padding-right 属性 设置 右 内 边 距 效 果 图 


13.5.3 下 内 边 距 padding-bottom 


通过 padding-bottom 属性 可 以 设置 下 内 边 距 ， 也 就 是 标签 设置 的 元 素 内 的 内 容 与 元 素 
底部 的 距离 。 其 语法 结构 如 下 : 
padding-bottom:n; /* 设 置 下 内 边 距 */ 


其 中 ，n 用 来 填写 距离 的 大 小 。 

【示例 13.32】 下 面 是 使 用 padding-bottom 属性 来 设置 下 内 边 距 的 效果 。 这 里 将 使 用 内 
部 样式 表 来 作为 CSS 样式 的 连接 。 为 了 使 效果 更 明显 ， 添 加 了 文字 并 设置 宽度 和 高 度 。 代 
码 如 下 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 

WWW.W3.0rg/TR/xhtml1/DTD/xhtmll-transitional .dtd"> 

<html xmlns="http://www.w3.0org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 


<title> 示 例 13.32</title> 
<style type="text/css"> 


< 

#padd 

{ 
border:solid 2px #00ffff; 
padding-bottom:70px; /* 设 置 下 内 边 距 */ 
width:300px; /* 设 置 宽度 */ 
height:200px; /* 设 置 高 度 */ 

3 

一 -> 

</style> 

</head> 

<body> 

<div id="padd"> 定 义 下 内 边 距 </div> <!-- 用 绑 定 了 的 id 选择 器 显示 样式 效果 --> 

</body> 

</html> 
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效果 如 图 13.32 所 示 。 


Es 
多 口 地 1332 x 电 
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定义 下 内 边 距 


下 内 边 距 70px 


图 13.32 ”使 用 padding-bottom 属性 设置 下 内 边 距 效果 图 


全 说 明 : 虽然 内 边 距 是 被 标签 计算 在 内 ,但 是 内 边 距 的 宽度 和 高 度 也 是 不 被 设置 的 宽度 和 
高 度 计 算 在 内 的 ， 所 以 使 用 时 ， 要 在 设置 的 宽度 和 高 度 上 再 加 上 内 边 距 的 宽度 和 


高 度 。 


13.5.4” 左 内 边 距 padding-left 


通过 padding-left 属性 可 以 设置 左 内 边 距 , 也 就 是 标签 设置 的 元 素 内 的 内 容 与 元 素 左边 
的 距离 。 其 语法 结构 如 下 : 
padding-left:n; /* 设 置 左 内 边 距 */ 


其 中 ，n 用 来 填写 距离 的 宽度 。 

【示例 13.33】 下 面 是 使 用 padding-left 属性 来 设置 左 内 边 距 的 效果 。 这 里 将 使 用 内 部 样 
式 表 来 作为 CSS 样式 的 连接 。 为 了 使 效果 更 明显 ， 添 加 了 文字 并 设置 宽度 和 高 度 。 代 码 
如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 
WWW.W3.0rg/TR/xhtml1/DTD/xhtmll-transitional .dtd"> 

<html xmlns="http://www.w3.o0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 13.33</title> 

<style type="text/css"> 


0 

#padd 

a :solid 2px #00ffff; 
Ppadding-left:70px; /* 设 置 左 内 边 距 */ 
text-align:left; /* 设 置 内 容 居 左 */ 
width:300px; /* 设 置 宽度 */ 


20" 


第 2 篇 CSS 样式 


height:200px; /* 设 置 高 度 */ 
= 
</style> 
</head> 
<body> 
<div id="padd"> 定 义 左 内 边 距 </div> <!-- 用 绑 定 了 的 id 选择 器 显示 样式 效果 --> 
</body> 
</html> 


效果 如 图 13.33 所 示 。 


= /5 
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《定义 左 内 边 距 
内 边 距 70px 


图 13.33 ”使 用 padding-left 属性 设置 左 内 边 距 效 果 图 


13.5.5 ”综合 声明 内 边 距 padding 


和 综合 声明 外 边 距 一 样 ， 综 合 声明 内 边 距 padding 属性 是 用 来 把 上 面 讲 过 的 四 个 不 同 
内 边 距 的 属性 值 全 部 放 在 一 起 ， 对 四 个 内 边 距 一 起 进行 声明 。 只 需要 在 每 个 属性 值 中 间 用 
英文 的 空格 号 隔 开 。 其 语法 结构 如 下 : 

paqdding: 各 种 属性 值 ; /* 综 合 声明 内 边 距 */ 


其 中 ，padding 属性 可 以 同时 设置 到 四 个 值 来 分 别 表 示 四 个 内 边 距 的 样式 。 当 padding 
属性 设置 了 四 个 值 ， 四 个 值 将 会 按照 顺 时 针 方向 对 四 个 内 边 距 进行 设置 ， 分 别 是 上 - 右 - 下 - 
左 ; 当 padding 属性 设置 了 三 个 值 ， 第 一 个 用 于 设置 上 内 边 距 ， 第 二 个 用 于 设置 左 内 边 距 
和 右 内 边 距 ， 第 三 个 用 于 设置 下 内 边 距 ， 当 padding 属性 设置 了 两 个 值 ， 第 一 个 用 于 设置 
上 内 边 距 和 下 内 边 距 ， 第 二 个 用 于 设置 左 内 边 距 和 右 内 边 距 。 

【示例 13.34】 下 面 是 使 用 padding 属性 来 综合 设置 内 边 距 的 效果 。 这 里 将 使 用 内 部 样 
式 表 来 作为 CSS 样式 的 连接 。 为 了 使 效果 更 明显 ， 添 加 了 文字 并 设置 宽度 和 高 度 。 代 码 
如 下 : 


<!DOCTYPE html PUBLIC "“-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 
WWW.Ww3.0org/TR/xhtmll1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.0org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 13.34</title> 

人 type="text/css"> 


第 13 章 CSS 属性 


border:solid 2px #00ffff; 
padding:30px 50px; /* 综 合 声 明 上 、 下 内 边 距 为 30px， 左 、 右 内 边 距 为 50px*/ 


width:150px; /* 设 置 宽度 */ 
height:50px; /* 设 置 高 度 */ 
} 
-padd2 
border:solid 2px #00ffff; 
height:50px; /* 设 置 高 度 */ 
width:150px; /* 设 置 宽度 */ 


Padding:50px 30px 40px; 
/* 综 合 声 明 上 内 边 距 为 50px， 左 、 右 内 边 距 为 30px， 下 内 边 距 为 40px*/ 
3 


-padd3 

{ 
border:solid 2px #00ffff; 
width:150px; /* 设 置 宽度 */ 
height:50px; /* 设 置 高 度 */ 


Padding:50px 70px 30px 30px; 
/* 综 合 声 明 上 内 边 距 为 50px， 右 内 边 距 为 70px， 左 内 边 距 为 30px， 下 内 边 距 为 30px*/ 
-> 
</style> 
</head> 
<body> 
<div class="padd1"> 设 置 内 边 距 设置 内 边 距 设置 内 边 距 设置 内 边 距 设置 内 边 距 </div> 
<!-- 用 绑 定 了 的 类 选择 器 显示 样式 效果 --> 
<br /> 
<div class="padd2"> 设 置 内 边 距 设 置 内 边 距 设 置 内 边 距 设置 内 边 距 设置 内 边 距 </div> 
5 <!-- 用 绑 定 了 的 类 选择 器 显示 样式 效果 --> 
<bE /> 
<div class="padd3"> 设 置 内 边 距 设 置 内 边 距 设置 内 边 距 设置 内 边 距 设置 内 边 距 </div> 
<!-- 用 绑 定 了 的 类 选择 器 显示 样式 效果 --> 
</body> 
</html> 


效果 如 图 13.34 所 示 。 
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图 13.34 ”使 用 padding 属性 设置 内 边 距 效果 图 
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由 图 13.34 可 以 看 出 ，1 中 边框 内 的 文字 与 边框 的 上 、 下 内 边 距 为 30px， 左 、 右 内 边 
距 为 70px; 2 中 边框 内 的 文字 与 边框 的 上 内 边 距 为 50px， 左 、 右 内 边 距 为 30px， 下 内 边 距 
为 40px; 3 中 边框 内 的 文字 与 边框 的 上 内 边 距 为 50px, 右 内 边 距 为 70px, 左 内 边 距 为 30px， 
下 内 边 距 为 30px。 


全 注意 : 并 不 是 使 用 了 内 边 距 就 不 用 再 使 用 外 边 距 ， 由 于 兼容 性 的 问题 ， 有 时 候 内 边 距 要 
和 外 边 距 一 起 使 用 ， 才 可 以 达到 兼容 效果 。 


13.6 CSS 列表 属性 


列表 属性 用 于 定义 列表 元 素 的 显示 效果 。 在 CSS 中 ， 列 表 元 素 的 控制 包括 列表 符号 、 
列表 图 片 和 控制 列表 位 置 等 儿 个 方面 。 使 用 CSS 列表 属性 可 以 做 到 HTML 列表 中 许多 做 
不 到 的 功能 。 本 节 将 详细 讲述 CSS 列表 属性 的 设置 。 


13.6.1 定义 列表 排序 图 案 list-style-image 


在 第 9 章 里 已 经 讲 过 列表 排序 的 符号 样式 。 在 实际 应 用 中 ， 仅 用 列表 符号 来 制作 页 面 
效果 是 不 够 的 , 可 以 考虑 使 用 图 片 来 代替 列表 符号 。list-style-image 属性 可 以 把 默认 的 列表 
符号 替换 成 列表 图 案 。 当 然 ，list-style-image 属性 只 是 插入 自己 设计 好 的 其 他 图 案 , 并 没有 
把 之 前 存在 的 图 案 去 掉 。 要 把 之 前 的 图 案 去 掉 就 需要 用 到 另 一 个 属性 值 list-style:none;。 其 
语法 结构 如 下 : 

ul{list-style:none;} /* 定 义 ul 标签 下 的 列表 不 显示 原 有 的 样式 图 案 */ 

1i{1list-style-image:url ("图 片 链接 地 址 ") ;} 

/* 定 义 1i 标签 下 的 列表 显示 插入 的 样式 图 案 */ 

其 中 ，list-style:none; 是 固定 格式 ， 想 要 去 除 掉 列表 之 前 的 图 案 ， 就 必须 在 ul 标签 里 设 
置 此 属性 。 对 于 list-style 属性 ,将 会 在 13.6.4 小 节 详 细 讲 解 。list-style-image 属性 下 的 图 片 
链接 地 址 和 之 前 讲 过 的 图 片 链接 地 址 一 样 ， 这 里 就 不 青 曾 述 。 

【示例 13.35】 下 面 是 使 用 list-style-image 属性 来 设置 列表 排序 图 案 的 效果 。 这 里 将 使 
用 内 部 样式 表 来 作为 CSS 样式 的 连接 。 图 片 使 用 images 文件 夹 里 的 13.35.jpg。 代 码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 
www.wW3 .org/TR/xhtm11/DTD/xhtml11-transitional .dtd"> 
<html xmlns="http://www.w3.org/1999/xhtm1"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 13.35</title> 
<style type="text/css"> 
< == 
ul{list-style-type:none;} /* 定 义 ul 标签 下 的 列表 不 显示 原 有 的 样式 图 案 */ 
li{list-style-image:url("../images/13.35.jpg");} 
/* 定 义 1i 标签 下 的 列表 显示 现 插 入 的 样式 图 案 */ 
一 -> 
</style> 
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</head> 
<body> 
<ul> 
<1i> 标 题 1</1i> 
<1i> 标 题 2</1i> 


</ul> 

</body> 

</html> 

效果 如 图 13.35 所 示 。 可 以 看 出 ， 原 有 的 列表 符号 被 换 成 了 插入 的 图 片 。 


Jem:s “人 


Ci Ofile///F/bj/ 安 扑 
各 标题 1 
各 标题 2 
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图 13.35 使 用 list-style-image 属性 设置 列表 排序 图 案 效 果 图 


13.6.2 ”定义 列表 排序 位 置 list-style-position 


有 时 候 需 要 在 不 同 的 位 置 来 显示 列表 符号 或 图 片 , 这 时 候 就 可 以 使 用 list-style-position 
属性 来 进行 设置 。 使 用 list-style-position 属性 可 以 设置 列表 排序 的 标记 是 否 显 示 在 文本 内 
容 里 面 ， 并 且 文 本 内 容 是 否 与 列表 排序 的 标记 对 齐 。list-style-position 属性 具有 两 个 值 : 
outside 和 inside。 其 语法 结构 如 下 : 

list-style-position:outside/inside; /* 定 义 列表 排序 位 置 */ 


当 list-style-position:outside; 时 ， 表 示 列 表 排序 标记 的 位 置 不 在 文本 内 容 里 面 ， 并 且 文 
本 内 容 不 与 列表 排序 的 标记 对 齐 ; 当 list-style-position:inside: 时 ， 表 示 列 表 排 序 标记 的 位 置 
在 文本 内 容 里 面 ， 并且 文本 内 容 与 列表 排序 的 标记 对 齐 。list-style-position 属性 是 放 在 <ul> 
标签 里 的 。 

需要 注意 的 是 ， 当 list-style-position:outside; 时 ，IE 浏览 器 上 无 法 看 到 效果 ， 而 在 谷歌 
浏览 器 中 却 可 以 正常 显示 列表 排序 的 标记 。 下 面 将 举例 说 明 这 两 种 情况 。 

【示例 13.36】 下 面 是 使 用 list-style-position 属性 来 定义 列表 排序 位 置 的 效果 。 这 里 将 
使 用 内 部 样式 表 来 作为 CSS 样式 的 连接 。 为 了 使 效果 更 明显 ， 在 列表 项 上 添加 了 边框 。 代 
人 码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 
WWW.Ww3.0rg/TR/xhtml1/DTD/xhtml1l-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 13.36</title> 

<style type="text/css"> 

之 汪 和 < 菩 

ul.oult{list-style-position:outside; width:80px;} 
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/* 定 义 ul 标签 下 列表 排序 的 标记 不 显示 在 文本 内 容 里 面 */ 
ul.insl{list-style-position:inside; width:80px;} 

/* 定 义 ul 标签 下 的 列表 排序 的 标记 显示 在 文本 内 容 里 面 */ 
ul.ins2{list-style-position:inside; width:80px; 
list-style-image:url("../images/13.35.jpg");} 

/* 定 义 ul 标签 下 的 列表 排序 的 图 案 显示 在 文本 内 容 里 面 */ 
> 
</style> 
</head> 


<body> 
<ul class="out1"> 
<1i> 
<div style="width:100px;height:40px;border:1px solid #000000" > 标题 
1 标题 1 标题 1</div></1i> 
<li><div style="width:100px;height:40px;border:1px solid #000000" > 标 
题 2</div></1i> 
</ul> 
<ul class="ins1"> 
<1i> 
<div style="width:100px;height:40px;border:1lpx solid #000000" > 标题 
1 标题 1 标题 1</div></1i> 
<li><div style="width:100px;height:40px;border:1px solid #000000" > 标 
题 2</div></1i> 
</ul> 
<ul class="ins2"> 
<Ii> 
<div style="width:100px;height:40px;border:1lpx solid #000000" > 标题 
1 标题 1 标题 1</div></1i> 
<li><div style="width:100px;height:40px;border:1px solid #000000" > 标 
题 2</div></1i> 
</ul> 
</body> 
</html> 


效果 如 图 13.36 和 图 13.37 所 示 。 


13.6.3 ”定义 列表 排序 符号 样式 list-style-type 


通过 list-style-type 属性 可 以 来 设置 列表 排序 符号 的 样式 。list-style-type 属性 和 HTML 


中 列表 type 属性 的 用 法 是 一 样 的 。 但 有 点 不 同 的 是 ，list-style-type 属性 无 论 是 使 用 无 序列 


表 还 是 有 序列 表 都 可 以 设置 里 面 的 属性 值 。list-style-type 属性 是 放 在 <u> 标 签 


语法 结构 如 下 : 


list-style-type: 列 表 排序 符号 样式 ; 


/* 定 义 列表 排序 符号 样式 */ 


有 面 的 。 其 


在 这 里 list-style-type 属性 有 20 个 属性 值 ， 都 是 同样 的 用 法 ， 这 里 就 不 一 一 解说 。 


list-style-type 属性 的 属性 值 列表 如 下 所 示 : 


口 list-style-type:disc: 实心 
口 list-style-type:circle: 空 
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le 
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文件 (月 ”入 辑 (E) ”查看 (V) 收藏 失 (A) 工具 (T) 帮助 Ft ” 


慰 题 1 标 题 1 标 
是 1 
标题 2 


| 标题 1 标题 1 
| 慰 题 1 


图 13.36 ”定义 列表 排序 位 置 效 果 图 (IE) ”图 13.37 定义 列表 排序 位 置 效 果 图 (谷歌 浏览 器 ) 


list-style-type:square: 实心 方块 ; 

list-style-type:decimal: 阿拉 伯 数 字 ; 

list-style-type:lower-roman: 小 写 罗 马 数 字 i、ii、 击 等 ; 

list-style-type:upper-roman: 大 写 罗 马 数字 I、I、II 等 ; 

list-style-type:lower-alpha: 小 写 英文 字母 a、b、c 等 ; 

list-style-type:upper-alpha: 大 写 英文 字母 A、B、C 等 ; 

list-style-type:none: 不 使 用 项 目 符号 ; 

list-style-type:armenian: 传统 的 亚美尼亚 数字 ; 

list-style-type:cjk-ideographic: 浅 白 的 表意 数字 ; 

list-style-type:georgian: 传统 的 乔治 数字 ; 

list-style-type:lower-greek: 基本 的 希腊 小 写字 母 ; 

list-style-type:hebrew: 传统 的 希 伯 莱 数字 ; 

list-style-type:hiragana: 日 文平 假名 字符 ; 

list-style-type:hiragana-iroha: 日 文平 假名 序号 ; 

list-style-type:katakana: 日 文 片 假名 字符 ; 

list-style-type:katakana-iroha: 日 文 片 假名 序号 ; 

list-style-type:lower-latin: 小 写 拉丁 字母 ; 

list-style-type:upper-latin: 大 写 拉丁 字母 。 
于 后 面 11 项 在 中 文 的 页 面 上 都 是 不 被 支持 显示 的 ， 所 以 这 里 只 举例 说 明 前 9 项 的 
显示 效果 。 
【示例 13.37】 下 面 是 使 用 list-style-type 属性 来 定义 列表 排序 符号 样式 的 效果 。 这 里 将 
使 用 内 部 样式 表 来 作为 CSS 样式 的 连接 。 为 了 使 效果 更 明显 ,添加 了 文字 和 一 个 3 行 3 列 
的 表格 。 代 码 如 下 : 


<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 


DOOD00000g9g000gg90g0g0go0g9g09 
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<style type="text/css"> 
1 
ul.typl{list-style-type:disc;} /* 定 义 ul 标签 下 列表 排序 图 案 类 型 为 实心 圆 */ 
ul.typ2{list-style-type:circle;} /* 定 义 ul 标签 下 列表 排序 图 案 类 型 为 空心 圆 */ 
ul.typ3{list-style-type:square;} 
/* 定 义 ul 标签 下 列表 排序 图 案 类 型 为 实心 方块 */ 
ul.typ4{list-style-type:decimal;} 
/* 定 义 ul 0 序 图 案 类 型 为 阿拉 伯 数 字 */ 
ul.typ5{list-style-type:lower-roman; 
/* 定 义 ul 入 和 列表 排序 图 守 类 型 为 小 写 罗马 煞 字 */ 
ul.typ6{list-style-type:upper-roman;} 
/* 定 义 ul 标签 下 列表 排序 图 案 类 型 为 大 写 罗马 数字 */ 
ul.typ7{list-style-type:lower-alpha;} 
/* 定 义 ul 标签 下 列表 排序 图 案 类 型 为 小 写 英文 字母 */ 
ul.typ8{list-style-type:upper-alpha;} 
/* 定 义 标签 下 列表 排序 图 案 类 型 为 大 写 英文 字母 */ 
ul.typ9{list-style-type:none; 
/* 定 义 标签 下 列表 排序 图 案 类 型 为 不 使 用 项 目 符号 */ 
--> 
</style> 
</head> 
<body> 
<table border="1" bordercolor="#00FFFF"> 
<Er> 
<td> 
<ul class="typ1"> <!-- 用 绑 定 了 的 类 选择 器 显示 样式 效果 --> 
<1i> 标 题 1</1i> 
<1i> 标 题 2</1i> 
</ul> 
</td> 
<td> 
<ul class="typ2"> <!-- 用 绑 定 了 的 类 选择 器 显示 样式 效果 --> 
<1i> 标 题 1</1i> 
<1i> 标 题 2</1i> 
</ul> 
</td> 
<td> 
<ul class="typ3"> <!-- 用 绑 定 了 的 类 选择 器 显示 样式 效果 --> 
<1i> 标 题 1</1i> 
<1i> 标 题 2</1i> 
</ul> 
</td> 
<Htr> 
<tr> 
<td> 
<ul class="typ4"> <!-- 用 绑 定 了 的 类 选择 器 显示 样式 效果 --> 
<1i> 标 题 1</1i> 
<1i> 标 题 2</1i> 
</ul> 
</td> 
<td> 
<ul class="typ5"> <!-- 用 绑 定 了 的 类 选择 器 显示 样式 效果 --> 
<1i> 标 题 1</1i> 
<1i> 标 题 2</1i> 
</ul> 
</ta> 
<td> 
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<ul class="typ6"> <!-- 用 绑 定 了 的 类 选择 器 显示 样式 效果 --> 
<1i> 标 题 1</1i> 
<1i> 标 题 2</1i> 
</ul> 
</td> 
/二 天 > 
3 
<td> 
<ul class="typ7"> <!-- 用 绑 定 了 的 类 选择 器 显示 样式 效果 --> 
<1i> 标 题 1</1i> 
<1i> 标 题 2</1i> 
</ul> 
</td> 
<td> 
<ul class="typ8"> <!-- 用 绑 定 了 的 类 选择 器 显示 样式 效果 --> 
<1i> 标 题 1</1i> 
<1i> 标 题 2</1i> 
</ul> 
</td> 
<td> 
<ul class="typ9"> <!-- 用 绑 定 了 的 类 选择 器 显示 样式 效果 --> 
<1i> 标 题 1</1i> 
<1i> 标 题 2</1i> 
A 
</td> 
二 
</table> 
</body> 


效果 如 图 13.38 所 示 。 


f 
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图 13.38 使 用 list-style-type 属性 定义 列表 排序 符号 类 型 效果 图 


13.6.4 综合 声明 列表 属性 list-style 


综合 声明 列表 属性 list-style 是 用 来 把 上 面 所 讲 的 列表 的 不 同属 性 值 全 部 放 在 一 起 ， 对 
列表 一 起 进行 声明 的 。 只 需要 在 每 个 属性 值 中 间 用 英文 的 空格 号 隔 开 。 其 语法 结构 如 下 : 
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list-style: 各 种 属性 值 ; /* 综 合 声明 列表 属性 */ 


其 中 ， 每 种 属性 值 的 写法 要 和 之 前 讲述 列表 属性 里 的 属性 值 的 写法 一 样 ， 这 样 才 可 以 
产生 效果 。 

【示例 13.38】 下 面 是 使 用 list-style 属性 来 综合 声明 列表 属性 的 具体 效果 。 这 里 将 使 用 
内 部 样式 表 来 作为 CSS 样式 的 连接 。 代 码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 

WWW.W3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<htm1l xmlns="http://www.w3.0org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 示 例 13.38</title> 

<style type="text/css"> 

区 

ul.list-styl{list-style:url("../images/13.35.jpg") outside; width:80px;} 
/* 定 义 为 列表 插入 图 片 ， 列 表 排 序 标记 的 位 置 不 在 文本 内 容 里 面 */ 

ul.list-sty2{list-style:url("../images/13.35.jpg") inside; width:80px;} 
/* 定 义 为 列表 插入 图 片 ， 列 表 排 序 标记 的 位 置 在 文本 内 容 里 面 */ 

ul.list-sty3{list-style:square outside; width:80px;} /本 

定义 列表 符号 为 实心 方块 ， 列 表 排序 标记 的 位 置 不 在 文本 内 容 里 面 */ 


一 -> 

</style> 

</head> 

<body> 

<ul class="list-styl"> 
<1i > 标题 1</1i> 
<1i> 标 题 2</1i> 

</ul> 

<ul class="list-sty2"> 
<1i > 标题 1</1i> 
<1i> 标 题 2</1i> 

</ul> 

<ul class="list-sty3"> 
<1i > 标题 1</1i> 
<1i> 标 题 2</1i> 


效果 如 图 13.39 所 示 。 
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图 13.39 使 用 list-style 属性 综合 声明 列表 效果 图 
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13.7 本 章 小 结 


本 章 学 习 了 CSS 的 基本 属性 ， 详 细 介 绍 了 CSS 的 背景 属性 、 文 本 属性 、 边 框 属性 和 
列表 属性 。 本 章 难点 是 CSS 的 内 边 距 和 外 边 距 ， 概 念 容易 搞 混 ， 和 希望 同学 们 可 以 认真 仔细 
地 学 习 。 通 过 本 章 的 学 习 ， 可 以 掌握 HIML 标签 属性 外 的 样式 的 基本 设置 ， 使 页 面 更 加 下 
富 多 彩 。 下 一 章 将 讲解 CSS 中 的 伪 类 和 伪 元 素 。 


13.8 本 章 习题 


【习题 13-1】 使 用 CSS 样式 添加 背景 图 片 ， 添 加 文字 ， 并 设置 字体 颜色 为 蓝 色 ， 字 符 
间距 为 2px， 对 齐 方式 为 左 对 齐 , 文字 缩 进 20px， 字 体 大 小 为 20px， 效 果 如 图 13.40 所 示 。 

【习题 13-2】 使 用 CSS 样式 设置 边框 样式 为 双 线 边框 ， 颜 色 为 红色 ， 宽 度 为 13px， 效 
果 如 图 13.41 所 示 。 

【习题 13-3】 添 加 一 个 1 行 1 列 的 表格 ， 使 用 CSS 样式 设置 表格 内 div 标签 的 上 、 下 
外 边 距 为 40px， 左 、 右 外 边 距 为 50px， 上 、 下 内 边 距 为 30px， 左 、 右 内 边 距 为 40px， 效 
果 如 图 13.42 所 示 。 


J Oss x 
EC 
字体 颜色 为 蓝 色 ， 字 符 间 距 为 2p 

对 齐 方式 为 左 对 齐 ， 文 字 缩 进 20p 
字体 大 小 为 20px. 字体 颜色 为 蓝 色 ， 
符 间距 为 2px， 对 齐 方式 为 左 对 齐 ， 文 
字 缩 进 20px， 字 体 大 小 为 20px 
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13.40 ”使 用 CSS 样式 设置 文本 样式 效果 图 图 13.41 使 用 CSS 样式 设置 边框 效果 图 
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设置 外 边 距 和 内 边 距 


图 13.42 设置 外 边 距 和 内 边 距 效果 图 
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伪 类 和 伪 元 素 是 特殊 的 类 和 元 素 , 能 自动 地 被 支持 CSS 的 浏览 器 所 识别 。CSS 伪 类 主 
要 用 于 向 某 些 选 择 器 添加 特殊 的 效果 ,最 主要 的 用 途 是 用 来 设置 链接 样式 显示 效果 。 而 CSS 
伪 元 素 是 用 于 向 某 些 选择 器 设置 特殊 效果 。 伪 类 和 伪 元 素 之 间 看 起 来 有 些 相 似 ， 但 两 者 之 
间 却 有 截然 不 同 之 处 。 伪 类 是 要 指定 某 些 选择 器 才 可 以 使 用 ， 而 伪 元 素 并 不 一 定 要 指定 选 
择 器 才 可 以 使 用 。 本 章 将 详细 讲述 常用 的 CSS 伪 类 和 伪 元 素 。 


14.1 超 链接 的 伪 类 


CSS 伪 类 最 典型 的 使 用 就 是 超 链接 的 伪 类 的 使 用 , 可 以 用 来 设置 链接 不 同 的 显示 效果 。 
CSS 提供 了 4 种 伪 类 来 表示 链接 的 4 个 状态 分别 是 链接 未 被 访问 的 样式 、 鼠 标 指针 经 过 
链接 时 的 样式 、 鼠 标 按 下 时 的 样式 和 已 访问 的 链接 的 样式 。 关 于 超 链接 已 经 在 前 面 第 4 章 
详细 讲 过 。 本 节 就 来 详细 讲解 超 链 接 的 伪 类 的 使 用 。 


14.1.1 未 访问 的 链接 伪 类 :link 


未 访问 的 链接 伪 类 :link 用 来 定义 链接 内 容 在 未 被 访问 时 的 显示 效果 。:link 伪 类 放 在 选 
择 器 专 有 标签 <a> 的 后 面 ， 表 示 当 前 链接 样式 ， 即 没有 任何 触发 状态 的 链接 样式 ， 是 网 页 
链接 最 初 的 样子 。 其 语法 结构 如 下 : 

a 选择 器 :1ink{ 属 性 :属性 值 ; } 上 * 设 置 示 被 访问 的 链接 状态 */ 


其 中 ，:link 伪 类 是 紧 跟着 选择 器 ， 不 需要 加 空格 或 其 他 符号 。 在 a 和 :link 伪 类 中 间 还 
可 以 加 入 id 选择 器 或 类 选择 器 ,在 这 三 者 之 间 也 不 需要 加 空格 或 其 他 符号 。 在 :link 伪 类 后 
面 的 大 括号 里 面 ， 可 以 填写 之 前 讲述 过 的 多 种 修饰 用 的 属性 ， 只 要 在 对 应 的 属性 里 面 写 好 
属性 值 就 可 以 了 。 

【示例 14.1】 下 面 是 使 用 :link 伪 类 显示 超 链接 未 被 访问 时 的 效果 。 这 里 将 使 用 内 部 样 
式 表 类 选择 器 来 作为 CSS 样式 的 连接 。 代 码 如 下 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 

WWW.w3.0rg/TR/xhtml1/DTD/xhtml1l-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 示 例 14.1</title> 


<style type="text/css"> 
eu 
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a.content:1link 

让 
color:#000000; 上 设置 链接 的 字体 颜色 */ 
font-size:20px; 广 设 置 链接 的 字体 大 小 */ 
text-decoration:none; 记 设 置 字体 下 方 无 下 划 线 */ 

} 

> 

</style> 

</head> 

<body> 

<a class="content" href="http://www.sohu.com/"> 链 接 到 搜狐 </a> 

</body> 

</html> 


效果 如 图 14.1 所 示 。 


@ 示 W141 和 a 
EL ][+J@newrte]j[a-cccoe | > 
ee 站 于 Apple 中 国 中国 浴 虎 扒 基 百科 
Q AM141 


链接 到 搜狐 


图 14.1 使 用 :link 伪 类 显示 超 链接 未 被 访问 时 的 效果 图 


14.1.2 已 被 访问 的 链接 的 伪 类 :visited 


已 被 访问 的 链接 伪 类 :visited 用 来 定义 链接 内 容 在 被 访问 后 的 显示 效果 。:visited 伪 类 放 
在 选择 器 专 有 标签 <a> 的 后 面 ， 表 示 已 访问 过 的 链接 样式 。 主 要 是 使 访问 者 对 网 页 中 已 访 
问 过 的 和 未 访问 过 的 网 页 一 目 了 然 。 其 语法 结构 如 下 : 

a 选 择 器 :visited {属性 :属性 值 ; } /# 设 置 已 被 访问 的 链接 的 状态 所 


其 中 ，:visited 伪 类 和 :link 伪 类 是 同样 用 法 的 ， 这 里 将 不 再 多 讲 。 

【示例 14.2】 下 面 是 使 用 :visited 伪 类 显示 超 链接 已 被 访问 的 显示 效果 。 这 里 将 使 用 内 
部 样式 表 类 选择 器 来 作为 CSS 样式 的 连接 。 代 码 如 下 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 

WWW.W3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.0org/1999/xhtml"> 

<head> 


<title> 示 例 14.2</title> 
<style type="text/css"> 


< 

a.content:visited 
color:#cc0000; /#* 设 置 链接 的 字体 颜色 为 红色 所 
font-size:20px; /# 设 置 链接 的 字体 大 小 志 / 
text-decoration:underline; /# 设 置 出 现下 划 线 所 


"is 
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} 

一 -> 

</style> 

</head> 

<body> 

<a class="content" href="http://www.sohu.com/"> 链 接 到 搜狐 </a> 
</body> 

</html> 


效果 如 图 14.2 所 示 。 


图 14.2 使 用 :visited 伪 类 显示 超 链接 已 被 访问 的 效果 图 


全 说 明 : 示例 中 ， 当 和 鼠标 单 击 过 此 链接 后 ， 再 回 到 页 面 ， 链 接 字体 会 变 成 红色 带 下 划 线 。 


14.1.3 ”鼠标 经 过 时 链接 的 伪 类 :hover 


鼠标 经 过 时 链接 的 伪 类 :hover 用 来 定义 当 鼠 标 经 过 链接 元 素 内 容 时 的 显示 效果 。 它 是 
-个 非常 重要 的 链接 属性 ， 要 靠 它 来 判断 当前 鼠标 的 位 置 是 否 是 一 个 链接 。:hover 伪 类 放 
在 选择 器 专 有 标签 <a> 的 后 面 ， 表 示 鼠 标 经 过 时 的 状态 。 其 语法 结构 如 下 : 
a 选择 器 :hover {属性 :属性 值 ; } 上 * 设 置 鼠 标 经 过 时 的 状态 */ 


其 中 ，:hover 伪 类 和 :link 伪 类 是 同样 用 法 的 ， 这 里 将 不 再 阐述 。 
【示例 14.3】 下 面 是 使 用 :hover 伪 类 显示 鼠标 经 过 超 链 接 时 的 效果 。 这 里 将 使 用 内 部 样 
式 表 id 选择 器 来 作为 CSS 样式 的 连接 。 代 码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 
WWW.Ww3.0org/TR/xhtml1/DTD/xhtmll-transitional .dtd"> 

<html xmlns="http://www.w3.-org/1999/Xxhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 14.3</title> 

<style type="text/css"> 


<1— 

a#content:hover 

{ 
color:#2894ff; 让 设置 字体 颜色 为 蓝 色 */ 
font-size:20px; 鼎 设 置 链接 的 字体 大 小 */ 
text-decoration:overline; 记 设 置 出 现 上 划 线 */ 

} 

==> 
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</style> 
</head> 
<body> 
<a id="content" href="http://www.sohu.com/"> 这 是 一 个 链接 </a> 
</body> 
</html> 
效果 如 图 14.3 所 示 。 
@ B143 h ET 一 > 一) (© on43 二 [en > 
[xl [+I@rme//rte)[A- cooge | > [zl | [+I@rme//t oe|[Q- Googe | > 
ee 站 深 Apple 中 国 中国 锥 虎 准 基 百科 » 
A N14.3 | reaso| 
汶 此 一 个 链接 


0 


鼠标 经 过 前 状态 鼠标 经 过 时 的 状态 


图 14.3 ”使 用 :hover 伪 类 显示 鼠标 经 过 超 链接 时 的 效果 图 


外 说 明 : 示例 中 ， 当 鼠标 移 到 链接 字体 上 ， 就 会 显示 出 如 图 14.3 所 示 2 中 的 效果 。 


外 技巧 : 如 果 只 是 单单 想 用 鼠标 经 过 的 效果 来 做 菜单 内 容 等 ， 可 以 只 使 用 :link 和 :hover 这 
两 个 伪 类 。 不 过 :link 伪 类 一 定 要 放 在 :hover 伪 类 前 面 。 


14.1.4 鼠标 按 下 时 链接 的 伪 类 :active 


鼠标 按 下 时 链接 的 伪 类 :active 是 用 来 定义 当 鼠 标 按 下 链接 元 素 内 容 时 的 显示 效果 。 一 
般 伪 类 :active 使 用 的 很 少 ， 因 为 当 用 户 单 击 完 一 个 链接 时 ， 鼠 标 焦点 很 快 就 会 转移 ， 而 不 
再 是 按 下 时 的 状态 。:active 伪 类 放 在 选择 器 专 有 标签 <a> 的 后 面 ， 表 示 鼠 标 按 下 时 的 状态 。 
其 语法 结构 如 下 : 

a 选择 器 :active {属性 :属性 值 ; } 证 设置 鼠标 按 下 状态 */ 


其 中 ，:active 伪 类 和 :link 伪 类 是 同样 用 法 的 ， 这 里 将 不 再 阐述 。 
【示例 14.4】 下 面 是 使 用 :active 伪 类 显示 鼠标 按 下 超 链接 时 的 效果 。 这 里 将 使 用 内 部 样 
式 表 id 选择 嚣 来 作为 CSS 样式 的 连接 。 代 码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: 
//www.w3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 14.4</title> 

<style type="text/css"> 


I= 
a#content:active 
{ 
color:#be77ff; 上 # 设 置 字体 颜色 为 紫色 所 
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font-size:20px; 上 记 设 置 字体 大 小 */ 
text-decoration:underline; 广 设 置 出 现下 划 线 */ 
} 
= 
</style> 
</head> 


<body> 

<a id="content" href="http://www.sohu.com/"> 链 接 到 搜狐 </a> 
</body> 

</html> 


效果 如 图 14.4 所 示 。 


外 示 ml144 GE 


鼠标 按 下 前 状态 鼠标 按 下 时 的 状态 


图 14.4 使 用 :active 伪 类 显示 鼠标 按 下 超 链接 时 的 效果 图 


外 说 明 : 示例 中 ， 当 和 鼠标 按 下 链接 时 ， 就 会 显示 如 图 14.4 所 示 2 中 的 效果 。 
全 注意 : 这 四 个 伪 类 如 果 想 一 起 使 用 必须 按照 前 面 给 出 的 顺序 才 可 以 正常 显示 。 


在 前 面 已 经 分 别 讲述 了 四 个 伪 类 的 用 法 ， 现 在 将 把 这 四 个 伪 类 合 在 一 起 再 进行 举例 说 
明 ， 这 里 将 截 出 四 个 不 同 效果 的 图 。 

【示例 14.5】 下 面 是 使 用 前 面 所 讲 过 的 四 个 伪 类 来 显示 超 链 接 的 效果 。 这 里 将 使 用 内 
部 样式 表 来 作为 CSS 样式 的 连接 。 为 了 强化 效果 ， 添 加 了 文字 ， 为 字体 设置 了 颜色 、 大 小 
和 字体 修饰 。 代 码 如 下 : 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 


<title> 示 例 14.5</title> 
<style type="text/css"> 


<1== 

a#content:1link 

{ 
color:#000000; 人 #* 设 置 链接 的 字体 颜色 为 黑色 村 
font-size:20px; 记 设 置 链接 的 字体 大 小 */ 
text-decoration:none; 广 设 置 字体 下 方 无 下 划 线 */ 

} 

a#content:visited 

' 
color:#cc0000; 广 设 置 链接 的 字体 颜色 为 红色 */ 
font-size:20px; /# 设 置 链接 的 字体 大 小 电 


text-decoration:underline; /* 设 置 出 现下 划 线 */ 
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a#content:hover 


color:#2894ff; 履 设 置 字体 颜色 为 蓝 色 */ 
font-size:20px; 上 广 设 置 链接 的 字体 大 小 */ 
text-decoration:overline; /# 设 置 出 现 上 划 线 志 

} 

a#content:active 

{ 
color:#be77ff; 上 设 置 字体 颜色 为 紫色 */ 
font-size:20px; /# 设 置 字体 大 小 4/ 
text-decoration:underline; /#* 设 置 出 现下 划 线 所 

} 

= 

</style> 

</head> 

<body> 

<a id="content" href="http://www.sohu.com/"> 链 接 到 搜狐 </a> 

</body> 

</html> 


效果 如 图 14.5 所 示 。 


示 示 eel™>™) 
@ 示 W141 二 ET 入 示例 142 
[ELtJenewrte]j[a-coooe |] > [UL+tJenewrte]j[arccose。 | > 
ee 加 昭 Apple 中 国 中 国 淮 遍 维基 百科 为 ee 外 当 Apple 中 国 中 国 淮 虎 维基 百科 六 
用 e@ sm41 1 ee m2 | | 
链接 到 搜狐 链接 到 搜狐 
初始 状态 单 击 链接 后 状态 
外 示 M143 @ 示 B144 吾 
Eee@newrte]j[arccooe |» [UPj[+tJB@iewrte]j[Grceoae | > 
ee 外 于 Apple 中国” 中 国 雅虎 维基 百科 为 ee 加 下 Apple 中 国 中 国 锥 虎 维基 百 科 。。 六 
Ne Ams + Ne 二 144 jn ne | 
这 是 可 个 链接 链 
© | © 


鼠标 经 过 时 的 状态 鼠标 按 下 时 的 状态 


图 14.5 使 用 CSS 伪 类 显示 超 链接 效果 图 


在 图 14.5 中 ，1 是 没 单 击 过 的 链接 的 效果 图 ，2 是 单 击 过 后 又 回 到 原来 页 面 的 效果 图 ， 
3 是 鼠标 经 过 链接 时 的 效果 图 ，4 是 鼠标 按 下 链接 时 的 效果 图 。 
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全 说 明 : 伪 类 中 除了 上 述 的 四 个 外 ， 还 有 :focus、:first-child、:lang 这 三 个 伪 类 。 由 于 后 面 
这 三 个 伪 类 都 比较 少 用 ， 而且 不 被 多 个 浏览 器 支持 ， 所 以 在 这 里 将 不 做 讲述 ， 具 
体 请 参考 其 他 CSS 书籍 。 


14.2 伪 元 素 


CSS 伪 元 素 是 用 于 向 某 些 选择 器 设置 特殊 效果 。 这 些 伪 元 素 添加 到 的 选择 器 ， 不 一 定 
是 指定 的 专用 标签 ， 可 以 是 不 指定 的 专用 标签 ， 不 过 不 可 以 是 单个 这 选择 器 或 类 选择 器 。 
伪 元 素 最 常用 的 就 是 文本 首 行 的 设置 和 文本 首 字 母 的 设置 。 本 节 将 详细 讲述 这 两 个 伪 元 素 
的 应 用 。 


14.2.1 首 字母 样式 设置 :first-letter 


:first-letter 伪 元 素 用 于 向 文本 的 首 字 母 设 置 特殊 样式 。:first-letter 伪 元 素 的 使 用 方法 和 
伪 类 的 使 用 方法 基本 上 是 一 样 的 。 其 语法 结构 如 下 : 
专用 标签 选择 器 :first-letter {属性 :属性 值 ; } /# 添 加 首 字母 样式 术 


其 中 ，:first-letter 伪 元 素 是 紧 跟 着 选择 器 ， 不 需要 加 空格 或 其 他 符号 。 在 专用 标签 选 
择 器 和 :first-letter 伪 元 素 中 间 还 可 以 加 入 id 选择 器 或 类 选择 器 ， 在 这 三 者 之 间 也 不 需要 加 
空格 或 其 他 符号 。 在 :first-letter 伪 元 素 后 面 的 大 括号 里 面 ， 可 以 填写 之 前 讲述 过 的 多 种 文 
本 修饰 用 的 属性 ， 只 要 在 对 应 的 属性 里 面 写 好 属性 值 就 可 以 了 。 

【示例 14.6】 下 面 是 使 用 :first-letter 伪 元 素 设置 首 字 母 样式 的 效果 。 这 里 将 使 用 内 部 样 
式 表 id 选择 器 作为 CSS 样式 的 连接 。 代 码 如 下 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 

WWW.W3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.0org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 示 例 14.6</title> 

<style type="text/css"> 

0== 

p#content:first-letter 

{ 

color:#00ffff; 庆 设 置 字体 颜色 
font-size:28px; /#* 设 置 字体 大 小 8/ 
font-face: 楷 体 ; /# 设 置 字 体 风 格 s/ 

下 

--> 

</style> 

</head> 

<body> 

<p id="content"> 这 是 使 用 伪 元 素 显示 首 字母 样式 的 例子 </p> 

</body> 

</html> 
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效果 如 图 14.6 所 示 。 


J ©am46 x \ Y 


| 人 > C 胡 Ofiley//F/bj/ 示 例 窑 忆 


是 使 用 伪 元 素 显示 首 字 母 样式 
的 例子 


图 14.6 ”使 用 :frrst-letter 伪 元 素 显示 首 字 母 样式 效果 图 


全 注意 : 使 用 伪 元 素 只 能 用 修饰 文本 的 属性 来 对 伪 元 素 进行 修饰 ， 不 能 用 修饰 框架 之 类 的 
属性 来 对 伪 元 素 进行 修饰 。 


14.2.2 首 行 样式 设置 :first-line 


:first-line 伪 元 素 用 于 向 文本 的 首 行 设置 特殊 样式 。:first-line 伪 元 素 的 使 用 方法 和 伪 类 
的 使 用 方法 基本 上 是 一 样 的 。 其 语法 结构 如 下 : 


专用 标签 选择 器 :first-line {属性 :属性 值 ; } 此 添加 首 行 样式 */ 
其 中 ，:first-line 伪 元 素 的 写法 、 用 法 和 :first-letter 伪 元 素 的 写法 、 用 法 一 样 ， 这 里 不 
再 阐述 。 


【示例 14.7】 下 面 是 使 用 :first-line 伪 元 素 显示 首 行 样式 的 效果 。 这 里 将 使 用 内 部 样式 表 
id 选择 器 来 作为 CSS 样式 的 连接 。 代 码 如 下 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 

WWW.w3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.0org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 示 例 14.7</title> 

<style type="text/css"> 


区 这 = 

p{ width:200px;color:#00ffff;} /# 设 置 整个 文本 宽度 和 颜色 所/ 

p#content:first-line 

{ 
color:#f£f£0000; 庆 设置 首 行 字体 颜色 所 
font-size:25px; /# 设 置 首 行 字体 大 小 所 

中 

--> 

</style> 

</head> 

<body> 

<P id="content"> 现 在 看 到 的 是 使 用 :first-letter 伪 元 素 显示 首 行 样式 </p> 

</body> 

</html> 


效果 如 图 14.7 所 示 。 
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SC 人 i |D file///F/bjs 窜 


现在 看 到 的 是 使 


图 14.7 ”使 用 :first-line 伪 元 素 显示 首 行 样式 效果 图 


外 说 明 : 伪 元 素 中 除了 上 述 的 两 个 外 ,还 有 :before、:after 这 两 个 伪 元 素 。 由 于 后 面 这 两 个 
人 擅 元 素 都 是 比较 少 用 ， 而 且 不 被 多 个 浏览 器 支持 ， 所 以 在 这 里 将 不 做 讲述 ， 具 体 
请 参考 其 他 CSS 书籍 。 


14.3 本 章 小 结 


本 章 学 习 了 CSS 中 伪 类 和 伪 元 素 的 应 用 , 主要 讲解 了 超 链接 伪 类 的 使 用 和 文本 内 容 伪 
元 素 的 使 用 。 通 过 本 章 的 学 习 ， 读 者 可 以 通过 对 链接 效果 的 控制 ， 使 得 本 来 枯燥 的 链接 变 
得 丰富 有 趣 。 还 可 以 了 解 到 文本 内 容 更 多 的 设置 方法 。 下 一 章 将 讲解 制作 网 站 的 脚本 语言 。 


14.4 本 章 习题 


【习题 14-1】 使 用 超 链接 的 4 个 伪 类 设置 链接 的 4 个 不 同 状 态 ， 链 接 到 百度 ， 效 果 如 
图 14.8 所 示 。 
【习题 14-2】 使 用 伪 元 素 设置 文本 首 字母 和 首 行 样式 ， 效 果 如 图 14.9 所 示 。 


OF J Oma » 
fe > et Omi EE 
链接 到 百度 链接 到 百度 

初始 状态 单 击 链接 后 状态 
SC «Ons en met 


电 
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© @ 是 使 用 伪 元 素 显示 首 字 
WO ne 母 样式 和 首 行 样式 的 例子 这 是 使 用 伪 元 素 
二 生字 全 人 式 的 曾子 这 是 使 用 仿 天 和 
鼠标 经 过 时 的 状态 鼠标 按 下 时 的 状态 ee 


图 14.8 设置 超 链接 不 同 状态 效果 图 图 14.9 设置 首 字 母 和 首 行 样式 效果 图 
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脚本 语言 也 称 为 动态 语言 , 是 一 种 计算 机 语言 , 它 可 以 与 HIML、Java 小 程序 或 者 JSP 
等 Web 开发 语言 一 起 实现 一 个 Web 页 面 与 浏览 者 进行 交互 。 脚 本 语言 主要 是 用 来 实现 一 
些 动态 的 页 面 效 果 。 在 使 用 脚本 语言 的 时 候 ， 首 先 要 定义 脚本 。 本 章 将 详细 讲述 HTML 中 
脚本 的 使 用 。 


15.1 定义 脚本 <script> 


通过 <scrip 忆 标签 可 以 在 HTML 页 面 中 对 脚本 进行 定义 。 用 户 可 以 把 HTML 中 的 脚本 
插入 到 页 面 中 。 定 义 脚本 的 时 候 还 需要 添加 一 个 属性 来 指定 脚本 的 语言 ， 也 就 是 我 们 所 说 
的 语言 类 型 。 其 语法 结构 如 下 。 

<script type="text/ 脚 本 语言 "> 定义 脚本 </script> <!-- 定 义 脚 本 =--> 


其 中 ，type="text/ 脚 本 语言 "是 一 个 固定 格式 ， 在 里 面 填写 的 脚本 语言 是 在 <script 标 签 
中 需要 编写 的 语言 。 最 常用 的 脚本 语言 是 JavaScript 和 VBScript。 本 章 我 们 就 以 JavaScript 
这 种 脚本 语言 来 做 举例 说 明 。 

【示例 15.1】 下 面 是 使 用 JavaScript 脚本 来 显示 网 页 的 效果 。 代 码 如 下 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 

WWW.Ww3.0rg/TR/xhtml1/DTD/xhtmll-transitional .dtd"> 

<html xmlns="http://www.w3.0org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 示 例 15.1</title> 

</head> 

<body> 

<script type="text/javascript"> <!-- 开 始 插入 JavaScript 脚本 --> 

Et 

alert ("这 是 使 用 JavaScript 的 显示 效果 ") : ”// 弹 出 一 个 对 话 框 

--> 

</script> <!-- 结 束 插入 JavaScript 脚本 --> 


</body> 
</html> 


效果 如 图 15.1 所 示 。 

使 用 <scrip 亿 标签 有 个 问题 ， 如 果 遇 到 老式 的 浏览 器 无 法 识别 <scrip 它 标签 时 ， 那 么 
<scrip 人 标签 里 的 内 容 会 以 文本 方式 显示 在 页 面 上 。 为 了 避免 这 种 情况 的 发 生 ， 必 须 在 
<script> 标 签 里 加 上 注释 标签 ， 把 脚本 隐藏 在 注释 标签 里 面 。 其 语法 形式 如 下 : 
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( M151 x 
后 说 X 省 file:y//F:/bj/ 示 例 /第 15 章 /15.] 安 以 


图 15.1 使 用 JavaScript 脚本 显示 网 站 效果 图 


<script type="text/javascript"> <!-- 开 始 插入 JavaScript 脚本 --> 
C 

JavaScript 脚本 语言 

WE 

</script> <!-- 结 束 插入 JavaScript 脚本 --> 


【示例 1$.2】 下 面 是 使 用 添加 注释 的 JavaScript 脚本 来 显示 网 页 的 具体 效果 。 为 了 使 用 
范围 效果 更 明显 ， 这 里 加 上 了 一 些 文字 和 换行 标签 。 代 码 如 下 : 


<1DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 
WwwW.w3.0org/TR/xhtml1/DTD/xhtmll-transitional .dtd"> 
<html xmlns="http://www.w3.0org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 15.2</title> 
</head> 
<body> 
使 用 Javascript 编写 的 显示 效果 :<br /><br/><br/> 
<!-- 开 始 插入 JavaScript 脚本 --> 
<script type="text/javascript"> 
= 
document .write ("这 是 使 用 JavaScript 的 显示 效果 ") 
//--> 
</script> <!-- 结 束 插入 JavaScript 脚本 --> 
</body> 
</html> 


效果 如 图 15.2 所 示 。 


全 全 C 模 昌 filey//F:/bj/ 示 例 /第 15 章 /15.: 窑 外 
使 用 JavaScript 编 写 的 显示 效果 : 


这 是 使 用 JavaScrip 的 显示 效果 


图 15.2 ”使 用 添加 注释 的 JavaScript 脚本 显示 网 页 效果 图 
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外 技巧 ， 在 使 用 <scrip 人 > 标签 时 ， 建 议 在 插入 脚本 语言 的 时 候 ， 就 要 写 上 注释 标签 ， 这 样 
可 以 使 网 站 兼容 性 更 好 ， 网 站 更 完善 。 


15.2 ”替换 文本 <noscript> 


通过 <noscrip 人 标签 可 以 设置 替换 文本 , 替换 文本 是 指 在 定义 的 脚本 没有 执行 时 的 代替 
文本 。<noscrip 亿 标签 和 <scrip 亿 标签 是 写 在 <body> 标 签 里 面 的 。 其 语法 结构 如 下 : 
<noscript> 蔡 换文 本 </noscript> <!-- 设 置 替换 文本 =--> 


其 中 ，<noscrip 亿 标签 是 在 <scrip 亿 标签 存在 的 情况 下 才 产 生效 果 的 。 大 多 情况 下 
<scrip 尼 标签 都 可 以 被 浏览 器 所 执行 ， 不 过 在 有 些 浏 览 器 上 ， 设 定 拦 截 后 ， 只 有 手动 设置 允 
许 通过 才 可 以 显示 出 <scrip 它 标签 的 脚本 内 容 。 所 以 在 使 用 上 ， 还 是 有 必要 把 <noscrip 亿 标 
签 写 在 <scrip 忆 标签 后 面 的 ， 这 也 是 为 了 网 站 的 完整 性 和 兼容 性 。 

【示例 1S.3】 下 面 是 使 用 <noscrip 人 标签 来 显示 网 站 的 效果 。 为 了 强化 效果 ， 这 里 加 上 
了 一 些 文字 和 换行 标签 。 代 码 如 下 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 

Www.w3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.0org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 示 例 15.3</title> 

</head> 

<body> 

使 用 Javascript 的 显示 效果 :<br /><br/><br/> 

<script type="text/javascript"> 这 是 使 用 JavaScript 的 显示 效果 

<!-- 开 始 插入 JavaScript 脚本 --> 


I= 


alert ("这 是 使 用 Javascript 的 显示 效果 ") ; /7 弹出 一 个 对 话 框 

j= 

</script> <!-- 结 束 插入 JavaScript 脚本 --> 
<noscript> 这 是 替换 文本 </noscript> <!-- 设 置 奉 换文 本 --> 

</body> 

</html> 


效果 如 图 15.3 所 示 。 
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文件 顽强 喜 看 (V) 改 三 闪 (A)。 工具。 帮助 (H) 
使 用 JavaSeript 的 显示 效果 : 


这 是 苦 换文 本 


lnternet Explorer 已 限制 比 网 页 运行 加 本 或 ActiveX 控 。* 
件 . 
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图 15.3 ”使 用 <noscrip 人 标签 显示 网 站 效果 图 
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全 说 明 : <scrip 他 标签 和 <noscrip 亿 标签 都 可 以 根据 需要 写 在 <head> 标 签 和 <body> 标 签 
里 面 。 


15.3 详 入 对 象 <object> 


在 前 面 已 经 讲 过 ，<objec 忆 标签 可 以 用 来 插入 Flash， 这 只 是 <object> 标 签 其 中 一 个 用 
法 。<objecP> 标 签 还 可 以 用 来 在 HIML 中 翌 入 所 需 的 对 象 ， 也 就 是 可 以 用 来 插入 Java 中 后 
缀 为 .class 的 文件 ， 即 字 节 码 文件 (Java 类 文件 ) 。 这 里 主要 讲述 的 是 插入 字 节 码 文件 的 用 
法 。 使 用 <objec 人 标签 插入 .class 的 文件 ， 需 要 通过 classid、codetype 和 codebase 属性 来 进 
行 设置 。 其 语法 结构 如 下 : 


<object codetype="application/java-archive" classid="java:#.class" 


codebase=" 文 件 路 径 " ></object> <!--- 柑 入 对 象 --> 


其 中 ， 搬 入 :class 的 文件 ， 需 要 用 codetype="application/java-archive" 来 说 明 这 是 一 
个 .class 文件 ， 这 是 插入 .class 文件 的 固定 形式 。classid="java:# class"，java 是 用 来 说 明 插 
入 的 文件 是 用 Java 语言 编写 ; # class 是 用 来 填写 要 插入 的 .class 文件 ，codebase=" 路 径 "是 
用 来 填写 插入 的 .class 文件 的 路 径 。 值 得 注意 的 是 ，classid 属性 只 能 填写 插入 的 .class 文件 
的 文件 名 ， 不 可 以 写 路 径 。codebase 属性 只 能 写 插入 文件 的 路 径 ， 不 可 以 写 文件 名 。 

这 里 将 举例 说 明 <object> 标 签 怎么 插入 .class 文件 , 但 由 于 Java 文件 的 运行 环境 较为 复 
杂 ， 要 安装 其 插件 ， 再 对 插件 进行 设置 才 可 以 使 用 ， 一 般 情况 下 不 建议 使 用 。 所 以 在 这 里 
只 给 出 代码 示例 。 

【示例 1$.4】 下 面 是 使 用 <objec 人 标签 插入 Java 中 后 级 为 .class 文件 的 具体 代码 。 这 里 
插入 的 .class 文件 放 在 class 文件 夹 里 。 代 码 如 下 : 


<object codetype="application/java-archive" classid="java:nihao.class" 
codebase="class/nihao.class" > 


</object> <!-- 殿 入 对 象 -=-> 
15.4 本 章 小 结 


本 章 主要 学 习 了 HTML 中 的 脚本 的 基本 知识 ,详细 讲 解 了 定义 脚本 、 替 换文 本 和 和 骸 入 
对 象 的 使 用 。 通 过 对 脚本 的 学 习 , 读者 可 以 掌握 HIML 中 除了 标签 属性 外 的 其 他 脚本 语言 。 
其 中 JavaScript 脚本 语言 是 使 用 最 广泛 的 ， 读 者 需要 认真 学 习 。 下 一 章 将 讲解 HIML 中 的 
事件 。 

15.5 本 章 习 题 
【习题 15-1】 使 用 脚本 语言 为 网 页 添加 文本 ， 效 果 如 图 15.4 所 示 。 
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【习题 15-2】 为 网 页 中 的 脚本 语言 添加 蔡 换 文本 ， 以 防 浏览 器 不 支持 脚本 的 运行 ， 效 
果 如 图 15.5 所 示 。 


使 用 脚本 语言 显示 网 页 内 容 


图 15.4 使 用 脚本 语言 显示 网 页 内 容 效果 图 图 15.5 添加 替换 文本 效果 图 
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事件 (Event) 是 可 以 被 网 页 或 者 网 页 上 的 元 素 识别 的 操作 ， 就 是 指 当 浏览 者 在 浏览 网 
页 的 时 候 触发 了 某 些 动作 所 作出 的 相应 反应 。 当 浏览 者 触发 了 某 一 事件 ， 事 件 就 会 调用 相 
应 的 代码 ， 从 而 完成 某 一 操作 。 网 页 上 的 事件 可 以 增加 网 页 与 用 户 的 交互 操作 ， 也 可 以 增 
强 网 页 的 动态 效果 。 本 章 将 详细 讲解 HIML 中 触发 的 事件 。 


16.1 常见 事件 


常见 事件 就 是 指 在 HIML 中 比较 常用 、 比 较 简单 的 事件 。 本 节 将 用 较 简 单 、 容 易 明 白 
的 例子 详细 讲解 这 些 事 件 。 


16.1.1 单 击 事件 onClick 


单 击 事件 是 指 当 鼠 标 单 击 选 定 元 素 〈 如 超 链 接 、 图 片 等 ) 时 触发 的 事件 ， 可 以 通过 
onClick 来 进行 设置 。 通 过 onClick 能 执行 很 多 种 动作 ， 可 以 是 单纯 的 输出 显示 文本 样式 ， 
也 可 以 是 执行 一 个 复杂 的 JavaScript 程序 。 这 里 将 介绍 的 是 onClick 简单 的 改变 文本 样式 的 
用 法 。 其 语法 结构 如 下 : 

<body id=" 参 数 "> 

< 开始 标签 onClick=" 参 数 和 参数 值 ” ></ 闭 合 标签 > 


文本 内 容 
</body> 


其 中 ，onClick=“ 参 数 和 参数 值 ”是 固定 形式 。 这 里 的 参数 和 参数 值 随 着 用 法 的 不 同 ， 
会 有 不 同 的 改变 ， 一 般 都 是 自己 命名 的 。 如 果 是 自己 命名 的 参数 ， 必 须 在 适当 的 地 方 对 此 
参数 做 出 定义 ， 这 样 参数 才 会 被 使 用 。 简 单 的 用 法 ， 就 是 把 onClick 作为 属性 放 在 有 特定 
意义 的 标签 里 来 执行 事件 ， 通 过 在 <body> 标 签 里 用 id 属性 对 参数 进行 定义 来 使 事件 有 效 。 
这 里 将 用 一 个 绑 定 样式 的 专 有 标签 来 作 实例 ， 通 过 样式 来 触发 事件 ， 因 为 示例 会 有 两 个 不 
同 的 效果 ， 这 里 将 用 两 个 图 来 表示 。 

【示例 16.1】 下 面 是 使 用 onClick 触发 单 击 事件 的 效果 。 代 码 如 下 : 

<1DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 

WwwW.w3.0rg/TR/xhtml1/DTD/xhtml1l-transitional.dtd"> 

<html xmlns="http://www.w3.o0rg/1999/xhtml"> 

head> 

和 http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 示 例 16.1</title> 


<style type="text/css"> 
SU 
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#mainsj{font-size:12px;} /# 定 义 字体 大 小 六 
#mainsj span 

color:#984b4b; /# 定 义 字体 颜色 庆 
} 
-big {font-size:25px; color:blue;} /# 定 义 字 体 大 小 和 颜色 /* 
.small {font-size:16px; color:green;} 话 定 义 字 体 大 小 和 颜色 /* 
一 -> 
</style> 
</head> 


<body id="content"> 

<div id="mainsj"> 
<span onclick= "content.className='big';"> 蓝 色 大 号 字体 </span> 
<!-- 触 发 之 前 设置 big 的 样式 事件 --> 
<span onclick= "content.className='small' ;"> 绿 色 小 号 字体 </span> 
<!-- 触 发 之 前 设置 small 的 样式 事件 --> 

</div> 

< 

<table border="1"> 

EE 

<td> 

点 击 不 同 字体 ， 可 以 看 到 不 同 触发 的 事件 效果 

</td> 

</tr> 

</table> 

</body> 

</html> 


效果 如 图 16.1 所 示 。 可 以 看 出 1 中 是 刚 加 载 完 后 的 效果 ,2 中 是 单 击 “ 蓝 色 大 号 字体 ” 
后 的 效果 ，3 中 是 单 击 “ 绿 色 小 号 字体 ”后 的 效果 。 
~ 本 
Ome 
| @ 在 GileyWF/bj/ 示 全 第 16 章 /161 合 六 


号 击 不 同 字体 ， 可 以 看 到 不 同 般 发 的 事件 | IE 
区 果 打开 页 面 时 的 效果 


于 色 大 


点 击 不 同 字体 ， 可 以 看 到 不 
同 触发 的 事件 效果 


Ea 


字体 | 综 色 小 号 字体 


Sie VV 
了 fH Ofie//F/y/Fm1esne1 A | 
蔓 色 大 号 字体 | 绊 色 小 号 字体 

人 


反击 不 同 字体 ， 可 以 上 到 不 同 般 发 的 事件 
效 崇 


图 16.1 使 用 onClick 触发 单 击 事件 效果 图 
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全 说 明 : 这 是 onClick 简单 的 用 法 ， 如 果 想 更 深入 地 学 习 它 在 JavaScript 里 的 用 法 ， 请 参 
考 其 他 JavaScript 书籍 。 


16.1.2 ”双击 事件 onDblClick 


双击 事件 是 指 当 鼠 标 双 击 选 定 的 元 素 〈 如 超 链 接 、 图 片 等 ) 时 触发 的 事件 ， 可 以 通过 
onDblClick 来 进行 设置 。 和 onClick 一 样 ， 通 过 onDblClick 能 执行 很 多 种 动作 ， 可 以 是 单 
纯 的 输出 显示 文本 样式 ， 也 可 以 是 执行 一 个 复杂 的 JavaScript 程序 。 这 里 将 介绍 的 是 
onDblClick 简单 的 改变 文本 样式 的 用 法 。 语 法 形式 如 下 : 

<body id=" 参 数 "> 

< 开始 标签 onDblC1ick=" 参 数 和 参数 值 "></ 闭 合 标签 > 

文本 内 容 

</body> 

其 中 ，onDblClick=“ 参 数 和 参数 值 ”是 固定 形式 。onDblClick 和 onClick 的 书写 格式 
是 一 样 的 ， 这 里 就 不 再 阐述 。 这 里 将 用 一 个 绑 定 样式 的 专 有 标签 来 作 实例 ， 通 过 样式 来 触 
发 事件 ， 因 为 示例 会 有 两 个 不 同 的 效果 ， 这 里 将 用 两 个 图 来 表示 。 

【示例 16.2】 下 面 是 使 用 onDblClick 触发 双击 事件 的 效果 。 在 示例 16.1 的 基础 上 修改 ， 
其 代码 如 下 : 

<!IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 

WWW.W3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 


<title> 示 例 16.2</title> 
<style type="text/css"> 


i== 
#mainsj{font-size:12px;} 记 定 义 字 体 大 小 /* 
#mainsj span 
{ 

color:#984b4b; /#* 定 义 字体 颜 色 /* 
.big {font-size:25px; color:blue;} 刻 定 义 字 体 大 小 和 颜色 /* 
.small {font-size:16px; color:green;} 产 定 义 字 体 大 小 和 颜色 庆 
--> 
</style> 
</head> 


<body id="content"> 

<div id="mainsj"> 
<span onDblClick= "content.className='big';"> 蓝 色 大 号 字体 </span> | 
<!-- 触 发 之 前 设置 big 的 样式 事件 --> 
<span onDblClick= "content.className='smal1' ;"> 绿 色 小 号 字体 </span> 
<!-- 触 发 之 前 设置 smal1 的 样式 事件 --> 

</div> 

< 

<table border="1"> 

和 

<td> 

双击 不 同 字体 ， 可 以 看 到 不 同 触发 的 事件 效果 
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</td> 
</tr> 
</table> 
</body> 
</html> 


效果 如 图 16.2 所 示 。 可 以 看 出 1 中 是 刚 加 载 完 后 的 效果 , 2 中 是 双击 “ 蓝 色 大 号 字体 ” 
后 的 效果 ，3 中 是 双击 “绿色 小 号 字体 ”后 的 效果 。 
= 


| © N16.2 x 
访 CG 本 file://F:/bj/ 示 例 /第 16 章 /16.: 窑 信 
蓝 色 大 号 字体 | 绿色 小 号 字体 


中 同 字体 ， 可 以 看 到 不 同 触发 的 事件 


打开 页 面 时 的 效果 


0 


全 六 C 省 | file//WFVbj/ 示 例 /第 16 章 /167 窜 | 以 
到 大 和 人 | 绿色 小 号 字体 


双击 ″ 蓝 色 大 号 字 
体 ” 后 的 效果 ， 字 
体 变 成 蓝 色 ， 大 小 
为 25px 


双击 不 同 字体 ， 可 以 看 到 不 
同 触发 的 事件 效果 


和 访 C 本 filey//F/bj/ 示 例 /第 16 意 /16: 窑 以 
蓝 色 大 号 字体 | 绿色 小 号 字体 
BR 


双击 ”绿色 小 号 字 
体 ” 后 的 效果 ， 宁 
体 变 成 绿色 ， 大 小 
为 16px 


3 可 以 看 到 不 同 触发 的 事件 


© 


图 16.2 ”使 用 onDblClick 触发 双击 事件 效果 图 


全 说 明 : 这 是 onDblClick 简单 的 用 法 ， 如 果 想 更 深入 地 学 习 它 在 JavaScript 里 的 用 法 ， 请 
参考 其 他 JavaScript 书籍 。 


16.2 ”和 鼠标 触发 事件 onMouse 


鼠标 触发 事件 是 指 鼠 标 在 选 定 元 素 上 做 某 一 动作 所 触发 的 事件 , 可 以 通过 onMouse 来 


Es 
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进行 设置 。 上 面 所 讲 的 两 个 事件 也 都 属于 鼠标 事件 。 本 节 所 讲 的 onMouse 里 共有 五 个 触发 
事件 ， 分 别 是 鼠标 按 下 事件 、 鼠 标 移动 事件 、 和 鼠标 释放 事件 、 鼠 标 经 过 事件 和 和 鼠标 离开 事 
件 。 这 和 CSS 中 的 伪 类 有 些 相似 ， 但 是 onMouse 比 起 CSS 中 的 伪 类 使 用 起 来 要 广泛 得 多 、 
复杂 得 多 。 


16.2.1 鼠标 按 下 事件 onMouseDown 


鼠标 按 下 事件 是 指 当 按 下 鼠标 时 所 触发 的 事件 , 可 以 通过 onMouseDown 来 进行 设置 。 
其 语法 结构 如 下 : 
< 开始 标签 onMouseDown=" 参 数 和 参数 值 "></ 闭 合 标签 > 


其 中 ，onMouseDown=“ 参 数 和 参数 值 ”是 固定 形式 ， 里 面 的 参数 和 参数 值 的 格式 会 
根据 不 同 的 参数 而 出 现 不 同 。 

【示例 16.3】 下 面 是 使 用 onMouseDown 来 设置 鼠标 按 下 事件 的 效果 。 这 里 将 介绍 的 是 
onMouseDown 简单 的 弹出 系统 自 带 窗口 的 用 法 。 由 于 这 里 的 代码 只 需要 放 在 <body> 标 签 
里 面 ， 所 以 给 出 的 代码 只 是 放 在 <body> 标 签 里 面 的 代码 。 代 码 如 下 : 

<body > 

<p onmousedown="alert (' 这 是 鼠标 按 下 事件 ')"” > 请 按 下 鼠标 </p> 

<!--onmousedown 里 面 的 参数 alert 是 定义 弹出 系统 窗口 --> 
</body> 

效果 如 图 16.3 所 示 。 可 以 看 出 当 鼠 标 一 按 下 页 面 中 的 “请 按 下 鼠标 ”， 就 会 弹出 系统 
窗口 。 


全 言 CO 在 file///FVbj/ 示 例 / 第 16 童 /16.3.ht 以 


图 16.3 使 用 onMouseDown 显示 鼠标 按 下 事件 效果 图 


16.2.2 鼠标 释放 事件 onMouseUp 


鼠标 释放 事件 是 指 当 按 下 鼠标 按钮 被 释放 时 触发 的 事件 , 可 以 通过 onMouseUp 来 进行 
设置 。 不 难看 出 ， 前 面 所 学 的 onClick 事件 和 这 两 个 小 节 说 的 onMouseDown 事件 、 
onMouseUp 事件 有 些 相 似 。 其 实 ， 它 们 之 前 存在 着 这 样 的 关系 : onMouseDown+ 
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onMouseUp=onClick。onMouseUp 语法 结构 如 下 : 
< 开始 标签 onMouseUp=" 参 数 和 参数 值 ” ></ 闭 合 标签 > 


其 中 ，onMouseUp=“ 人 参数 和 参数 值 ”是 固定 形式 ， 里 面 的 参数 和 参数 值 的 格式 会 根 
据 不 同 的 参数 而 出 现 不 同 。 

【示例 16.4】 下 面 是 使 用 onMouseUp 来 显示 鼠标 释放 事件 的 效果 。 由 于 这 里 的 代码 只 
需要 放 在 <body> 标 签 里 面 ， 所 以 给 出 的 代码 只 是 放 在 <body> 标 签 里 面 的 代码 。 代 码 如 下 : 

<body > 

<p onmouseUp="alert (' 你 单 击 了 一 下 页 面 中 的 文字 !')"” > 请 单 击 这 里 </p> 

<!--onmouseUp 里 面 的 参数 alert 是 定义 弹出 系统 窗口 --> 
</body> 


效果 如 图 16.4 所 示 。 在 鼠标 按 下 “请 单 击 这 里 ”， 并 且 放 开 了 鼠标 按钮 后 才 弹 出 系统 
窗口 。 


5 示例 16.4 x 
全 防 C 省 @file///FVbj/ 示 例 /第 16 童 /16.4.ht 窜 以 


请 单 击 这 里 
R 


图 16.4 使 用 onMouseUp 显示 鼠标 释放 事件 效果 图 


全 说 明 : onMouseDown 和 onMouseUp 不 同 的 地 方 在 于 , onMouseDown 在 鼠标 按 下 还 没 松 
手 的 时 候 就 已 经 弹出 窗口 了 ， 而 onMouseUp 在 鼠标 按 下 松手 后 才 弹 出 窗口 。 


16.2.3 ”鼠标 停留 事件 onMouseMove 


鼠标 停留 事件 是 指 当 鼠标 指针 停留 在 选 定 元 素 上 时 触发 的 事件 ， 可 以 通过 
onMouseMove 来 进行 设置 。 其 语法 结构 如 下 : 

< 开始 标签 onMouseMove=" 参 数 和 参数 值 ” ></ 闭 合 标签 > 

其 中 ，onMouseMove=“ 参 数 和 参数 值 ”是 固定 形式 ， 里 面 的 参数 和 参数 值 的 格式 会 
根据 不 同 的 参数 而 出 现 不 同 。 

【示例 16.$】 下 面 是 使 用 onMouseMove 来 显示 鼠标 停留 事件 的 效果 。 由 于 这 里 的 代码 
只 需要 放 在 <body> 标 签 里 面 ， 所 以 给 出 的 代码 只 是 放 在 <body> 标 签 里 面 的 代码 。 代 码 
如 下 : 


me 
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<body > 

<p onmouseMove="alert ( "你 的 鼠标 停留 在 页 面 中 的 “鼠标 停留 事件 ”文字 上 ! ' ) "> 鼠标 停留 
事件 </p> <!--onmouseMove 里 面 的 参数 alert 是 定义 弹出 系统 窗口 --> 
</body> 


效果 如 图 16.5 所 示 。 


f 


二 言 C 人 前 file///FVbj/ 示 例 /第 16 齐 /16.5.ht 鹤 外 


鼠标 停留 良 件 


Le 


图 16.5 使 用 onMouseMove 显示 鼠标 停留 事件 效果 图 


全 注意 : 当 和 鼠标 在 文字 停留 一 下 就 会 产生 一 个 onMouseMove 事件 ， 这 样 会 耗费 系统 很 多 
资源 去 处 理 这 些 动 作 ， 所 以 应 谨慎 使 用 。 


16.2.4 ”鼠标 经 过 事件 onMouseOver 


鼠标 经 过 事件 是 指 当 鼠标 经 过 选 定 元 素 时 触发 的 事件 , 可 以 通过 onMouseOver 来 进行 
设置 。 其 语法 结构 如 下 : 
< 开始 标签 onMouseOver=" 参 数 和 参数 值 "></ 闭 合 标 签 > 


其 中 ，onMouseOver=“ 参 数 和 参数 值 ” 是 固定 形式 ， 里 面 的 参数 和 参数 值 的 格式 会 根 
据 不 同 的 参数 而 出 现 不 同 。 

【示例 16.6】 下 面 是 使 用 onMouseOver 来 显示 鼠标 经 过 事件 的 效果 。 这 里 将 添加 图 片 
和 文字 ， 图 片 将 使 用 images 文件 夹 里 的 13.2jpg。 由 于 这 里 的 代码 只 需要 放 在 <body> 标 签 
里 面 ， 所 以 给 出 的 代码 只 是 放 在 <body> 标 签 里 面 的 代码 。 代 码 如 下 : 


<body > 

<img src=". ./images/13.2.jpg" onMouseOver="alert(' 你 的 鼠标 经 过 了 一 张 图 片 !')" 
/> <!--onmouseOver 里 面 的 参数 alert 是 定义 弹出 系统 窗口 --> 
/Boay 


效果 如 图 16.6 所 示 。 
名 说明: 鼠标 经 过 图 片 ， 就 会 弹出 系统 窗口 ， 如 图 16.6 所 示 。 
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EYE 一: 一 | 
| © A966 < 


全 全 CO 在 @file/W/FVbj/ 示 例 /第 16 齐 /16.6.ht 究 以 


图 16.6 ”使 用 onMouseOver 显示 鼠标 经 过 事件 效果 图 


16.2.5 ”鼠标 离开 事件 onMouseOut 


鼠标 离开 事件 是 指 当 鼠 标 指 针 离 开 选 定 元 素 时 触发 该 事件 ， 可 以 通过 onMouseOnut 来 
进行 设置 。 其 语法 结构 如 下 : 
< 开始 标签 onMouseOut=" 参 数 和 参数 值 ” ></ 闭 合 标签 > 


其 中 ，onMouseOut=“ 人 参数 和 参数 值 ”是 固定 形式 ， 里 面 的 参数 和 参数 值 的 格式 会 根 
据 不 同 的 参数 而 出 现 不 同 。 

【示例 16.7】 下 面 是 使 用 onMouseOnut 来 显示 鼠标 离开 事件 的 效果 。 由 于 这 里 的 代码 只 
需要 放 在 <body> 标 签 里 面 ， 所 以 给 出 的 代码 只 是 放 在 <body> 标 签 里 面 的 代码 。 代 码 
如 下 : 

<img src="../images/13.2.jpg"” onMouseOut="alert(' 你 的 鼠标 已 经 离开 页 面 上 的 图 

| i <!--onmouseOut 里 面 的 参数 alert 是 定义 弹出 系统 窗口 --> 


效果 如 图 16.7 所 示 。 


i 加 file:///FVbj/ 示 例 /第 16 章 /16.7.ht 窑 AN 
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图 16.7 使 用 onMouseOut 显示 鼠标 离开 事件 效果 图 
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及 说明: 当 和 鼠标 离开 图 片 时 ， 就 会 弹出 系统 窗口 ， 如 图 16.7 所 示 。 


16.3 键盘 触发 事件 onKey 


键盘 触发 事件 是 指 在 键盘 上 做 某 一 动作 所 触发 的 事件 ， 可 以 通过 onKey 来 进行 设置 。 
本 节 所 讲 的 onKey 里 共有 三 个 触发 事件 ， 分 别 是 : 按 下 键盘 按键 事件 、 按 下 键盘 按键 并 任 
意 释 放 一 个 键 事件 和 释放 键盘 按键 事件 。 


16.3.1 按 下 键盘 按键 事件 onkeydown 


按 下 键盘 按键 事件 是 指 当 用 户 按 下 键盘 上 任意 键 时 触发 的 事件 ， 可 以 通过 onkeydown 
来 进行 设置 。 通 过 onkeydown 能 执行 很 多 种 动作 ， 可 以 是 单纯 的 输出 文字 ， 也 可 以 是 执行 
-个 复杂 的 JavaScript 程序 。 这 里 将 介绍 的 是 onkeydown 简单 的 输出 文字 的 用 法 。 其 语法 
结构 如 下 : 
< 开始 标签 onkeydown= "参数 和 参数 值 ”></ 闭 合 标签 > 


其 中 ，onkeydown=“ 人 参数 和 参数 值 ”是 固定 形式 ， 里 面 的 参数 和 参数 值 的 格式 会 根据 
不 同 的 参数 而 出 现 不 同 。 

【示例 16.8】 下 面 是 使 用 onkeydown 来 显示 按 下 键盘 按键 事件 的 效果 。 这 里 将 添加 文 
字 和 一 段 JavaScript 代码 。 由 于 这 里 的 代码 只 需要 放 在 <body> 标 签 里 面 ， 所 以 给 出 的 代码 
只 是 放 在 <body> 标 签 里 面 的 代码 。 代 码 如 下 : 

<body > 

请 在 键盘 上 输入 文本 : 

<form> <!-- 插 入 表单 --> 

<input type="text" onkeydown="alert(' 您 已 按 下 键盘 按键 ')" /> 

<! 一 -定义 按 下 键盘 事件 ， 并 弹出 系统 窗口 --> 


</form> 
</body> 


效果 如 图 16.8 所 示 。 


N16.8 x* 
二 访 CG 前 @file///FVbj/ 示 例 /第 16 章 /1( 窜 入 


请 在 键盘 上 输入 文本 : 


图 16.8 ”使 用 onkeydown 显示 按 下 键盘 按键 事件 效果 图 
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16.3.2 ” 按 下 并 任意 释放 一 个 键 事件 onkeypress 


按 下 并 任意 释放 一 个 键 事件 是 指 当 按 下 键盘 按键 并 任意 放 开 一 个 键 时 触发 的 事件 ， 可 
以 通过 onkeypress 来 进行 设置 。 其 语法 结构 如 下 : 
< 开始 标签 onkeypress=" 参 数 和 参数 值 "></ 闭 合 标签 > 


其 中 ，onkeypress=“ 参 数 和 参数 值 ”是 固定 形式 ， 里 面 的 参数 和 参数 值 的 格式 会 根据 
不 同 的 参数 而 出 现 不 同 。 

【示例 16.9】 下 面 是 使 用 onkeypress 来 显示 键盘 按键 被 按 下 并 松 开 事 件 的 具体 效果 。 
这 里 将 添加 文字 和 一 段 JavaScript 代码 。 由 于 这 里 的 代码 只 需要 放 在 <body> 标 签 里 面 ， 所 
以 给 出 的 代码 只 是 放 在 <body> 标 签 里 面 的 代码 。 代 码 如 下 : 

键盘 按键 被 按 下 并 松 开 事件 : 

<form> <!-- 插 入 表单 --> 


<input type="text" onkeypress="alert (' 您 已 按 下 键盘 按键 并 释放 按键 ') " /> 
<!-- 定 义 按 下 键盘 并 释放 按键 事件 ， 并 弹出 系统 窗口 --> 


</form> 


效果 如 图 16.9 所 示 ， 当 按 下 按键 并 任意 放 开 一 个 按键 时 就 会 弹出 系统 窗口 。 


6 人 C 在 @ filey//F:/bj/ 示 例 /第 16 意 /1( 窑 | 六 


键盘 按键 被 按 下 并 松 开 事件 : 


ss 


图 16.9 使 用 onkeypress 显示 键盘 按键 被 按 下 并 任意 松 开 一 个 按键 事件 效果 图 


16.3.3 释放 键盘 按键 事件 onkeyup 


释放 键盘 按键 事件 是 指 当 按 下 键盘 按键 后 释放 按键 时 触发 的 事件 ， 可 以 通过 onkeyup 
来 进行 设置 。 其 语法 结构 如 下 : 
< 开始 标签 onkeyup=" 参 数 和 参数 值 "></ 闭 合 标签 > 


其 中 ，onkeyup=“ 人 参数 和 参数 值 ”是 固定 形式 ， 里 面 的 参数 和 参数 值 的 格式 会 根据 不 
同 的 参数 而 出 现 不 同 。 

【示例 16.10】 下 面 是 使 用 onkeyup 来 显示 键盘 按键 被 松 开 事件 的 效果 。 这 里 将 添加 文 
字 和 一 段 JavaScript 代码 。 由 于 这 里 的 代码 需要 把 JavaScript 代码 放 在 <head> 标 签 里 面 ,所 
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以 给 出 的 代码 是 页 面 的 全 部 代码 。 代 码 如 下 : 


<body> 

请 输入 英文 单词 : <input type="text" id="fname" onkeyup="alert (' 您 已 释放 按键 ')" 
be <! 一 -定义 释放 按键 事件 ， 并 弹出 系统 窗口 --> 

</body> 


效果 如 图 16.10 所 示 ， 只 有 放 开 了 全 部 按键 时 才 会 弹出 系统 窗口 。 


D9 示 W16.12 x 

了 CG 本 filey///F:/bj/ 示 例 /第 16 意 安 以 
请 输入 英文 单词 : 

d 


图 16.10 使 用 onkeyup 显示 键盘 按键 被 松 开 事件 效果 图 


16.4 页 面 事件 


页 面 事件 是 指 在 页 面 上 做 某 一 动作 时 所 触发 的 事件 。 页 面 事件 包括 很 多 复杂 的 
JavaScript 程序 ， 本 节 将 以 最 简单 的 实例 来 展示 各 个 页 面 事件 的 用 法 和 设置 。 


16.4.1 图 片 下 载 时 被 中 断 事件 onAbort 


图 片 下 载 时 被 中 断 事 件 是 指 在 下 载 图 片 时 ， 图 片 未 下 载 完 就 被 中 断 时 所 触发 的 事件 ， 
可 以 通过 onAbort 来 进行 设置 。 通 过 onAbort 能 执行 很 多 种 动作 ， 可 以 是 单纯 的 弹出 窗口 ， 
也 可 以 是 执行 一 个 复杂 的 JavaScript 程序 。 其 语法 结构 如 下 : 

< 开始 标签 onAbort=" 参 数 和 参数 值 ” ></ 闭 合 标签 > 

其 中 ，onAbort=“ 人 参数 和 参数 值 ”是 固定 形式 ， 里 面 的 参数 和 参数 值 的 格式 会 根据 不 
同 的 参数 而 出 现 不 同 。 

【示例 16.11】 下 面 是 使 用 onAbort 来 显示 图 片 下 载 时 被 中 断 事件 的 效果 。 这 里 的 图 片 
使 用 了 images 文件 夹 里 的 13.3.jpg。 代 人 码 如 下 : 


<img src="images/13-3.jpg" onabort="alert(' 图 片 下载 被 中 断 ')" /> 
<! 一 -定义 图 片 被 中 断 时 弹出 系统 窗口 --> 


效果 如 图 16.11 所 示 。 
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x 《aa 
4 了 CG 从 file:///F:/bj/ 示 例 /第 16 童 窑 外 


图 16.11 使 用 onAbort 显示 图 片 在 下 载 时 被 中 断 事件 效果 图 


名 说明: 示例 中 定义 这 种 弹出 窗口 ， 在 网 页 中 是 经 常 被 用 到 的 。 


16.4.2 ”当前 页 面 的 内 容 将 要 被 改变 时 触发 事件 onBeforeUnload 


当前 页 面 的 内 容 将 要 被 改变 时 触发 事件 是 指 当 页 面 发 生 跳 转 、 返 回 、 刷 新 、 关 闭 等 将 
要 离开 本 页 面 的 时 候 ， 而 触发 的 事件 ， 可 以 通过 onBeforeUnload 来 进行 设置 。 其 语法 结构 
如 下 : 

< 开始 标签 onBeforeUnload=" 参 数 和 参数 值 "></ 闭 合 标签 > 


其 中 ，onBeforeUnload=“ 参 数 和 参数 值 ”是 固定 形式 ， 里面 的 参数 和 参数 值 的 格式 会 
根据 不 同 的 参数 而 出 现 不 同 。 

【示例 16.12】 下 面 是 使 用 onBeforeUnload 来 显示 当前 页 面 的 内 容 将 要 被 改变 时 触发 事 
件 的 效果 。 这 里 添加 了 一 些 文字 和 JavaScript 程序 。 由 于 这 里 的 JavaScript 程序 需要 放 在 
<head> 标 签 和 <body> 标 签 里 面 ， 所 以 给 出 的 代码 是 页 面 的 全 部 代码 。 代 码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 
WWW.W3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 16.12</title> 
</head> 
<script language="javascript"> <!--JavaScript 程序 开始 定义 弹出 窗口 --> 
glnUnload = true; 
function sxunload() { 
if (glnUnload) {window.event.returnValue = ' 你 确定 离开 本 页 面 吗 ?'; 
: 


} 
</script> <!--JavaScript 程序 结束 --> 
<body onbeforeunload="sxunload() "> <!-- 触 发 事件 时 调用 ravaScript 程序 --> 
请 刷新 或 关闭 当前 页 面 
</body> 
</html> 


效果 如 图 16.12 所 示 。 
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[EI 
(TOE we -ox|Gmer > 国医 
ET 
请 刷新 或 关闭 当前 页 面 


全 高 开 此 页 ( 


分 留 在 此 页 上 (5) 


图 16.12 使 用 onBeforeUnload 显示 触发 当前 页 面 的 内 容 将 要 被 改变 事件 效果 图 


外 说 明 : 这 里 示例 中 插入 的 JavaScript， 仅 仅 作为 一 个 辅助 示例 来 插入 ， 如 果 想 具体 了 解 
其 中 的 各 种 定义 ， 请 参考 其 他 JavaScript 的 书籍 。 


外 技巧 : 示例 中 ,页面 按 到 跳 转 、 返 回 、 刷 新 、 关 闭 按钮 ， 就 会 弹出 系统 窗口 ， 如 图 16.12。 
通常 这 种 弹出 窗口 会 在 会 员 退 出 和 提交 表单 时 用 得 多 。 


16.4.3 页面 出 错 事件 onError 


页 面 出 错 事件 是 指 当 页 面 在 加 载 文 本 或 图 片 时 ， 发 生 错 误 所 触发 的 事件 ， 可 以 通过 
onError 来 进行 设置 。 其 语法 结构 如 下 : 
< 开始 标签 onError=" 参 数 和 参数 值 "></ 闭 合 标签 > 


其 中 ，onError=“ 参 数 和 参数 值 ”是 固定 形式 ， 里 面 的 参数 和 参数 值 的 格式 会 根据 不 
同 的 参数 而 出 现 不 同 。 

【示例 16.13】 下 面 是 使 用 onError 来 显示 页 面 出 错 事件 的 效果 。 这 里 添加 了 一 张 错误 
的 图 片 ， 当 找 不 到 图 片 时 就 会 触发 onError 事件 。 代 码 如 下 : 

<body > 

<img src="16.13.jpg" onerror="alert(' 页 面 出 错 ， 找 不 到 此 图 片 !') "> 


<! 一 -定义 加 载 不 到 图 片 时 弹出 系统 窗口 --> 
</body> 


效果 如 图 16.13 所 示 。 


图 16.13 使 用 onError 显示 页 面 出 错 事件 效果 图 
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16.4.4 页 面 加 载 完事 件 onLoad 


页 面 加 载 完事 件 是 指 当 页 面 完成 图 片 、 文 本 等 内 容 的 加 载 后 触发 的 事件 ， 可 以 通过 
onLoad 来 进行 设置 。 其 语法 结构 如 下 : 
< 开始 标签 onLoad=" 参 数 和 参数 值 ">></ 闭 合 标签 > 


其 中 ，onLoad=“ 参 数 和 参数 值 ”是 固定 形式 ， 里 面 的 参数 和 参数 值 的 格式 会 根据 不 
同 的 参数 而 出 现 不 同 。 

【示例 16.14】 下 面 是 使 用 onLoad 来 显示 页 面 加 载 完 成 事件 的 效果 。 这 里 添加 了 一 些 
文字 ， 当 文字 加 载 完 成 后 ， 就 会 弹出 系统 窗口 ， 提 示 加 载 完成 。 代 码 如 下 : 

<body onload="alert (' 页面 加 载 完成 !' ) "> 


触发 页 面 加 载 完成 后 的 事件 ， 当 加 载 完成 后 ， 会 弹出 系统 窗口 。 
</body> 


效果 如 图 16.14 所 示 。 


AN16.14 x 
二 言 X 从 昌 filey//F:/bj/ 示 例 /第 16 意 /16 窑 入 


触发 页 面 加 载 完成 后 的 事件 ， 当 加 载 完成 
后 ， 会 弹出 系统 窗口 。 


图 16.14 使 用 onLoad 显示 页 面 加 载 完 成 后 的 触发 事件 效果 图 


16.4.5 ”改变 浏览 器 的 窗口 大 小 时 触发 的 事件 onResize 


改变 浏览 器 的 窗口 大 小 事件 是 指 当 浏览 者 改变 页 面 窗口 或 框架 大 小 被 调整 时 触发 的 
事件 ， 可 以 通过 onResize 来 进行 设置 。 其 语法 结构 如 下 : 

< 开始 标签 onResize=" 参 数 和 参数 值 "></ 闭 合 标签 > 

其 中 ，onResize=“ 参 数 和 参数 值 ”是 固定 形式 ， 里 面 的 参数 和 参数 值 的 格式 会 根据 不 
同 的 参数 而 出 现 不 同 。 

【示例 16.1S】 下 面 是 使 用 onResize 来 显示 浏览 器 的 窗口 大 小 被 改变 事件 的 效果 。 代 码 
如 下 : 

<body onresize="alert (' 窗 口 大 小 被 改变 ! ') "> <! 一 -定义 触发 事件 时 弹出 窗口 --> 

浏览 器 的 窗口 大 小 被 改变 时 触发 的 事件 


ey 
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</body> 


效果 如 图 16.15 所 示 。 


OAM1615 x 民 
6 > C 检 filey//F:/bj/ 示 例 /第 1( 窑 以 
人 


图 16.15 ”使 用 onResize 显示 浏览 器 的 窗口 大 小 被 改变 事件 效果 图 


16.4.6 ” 拖 动 滚动 条 事件 onScroll 


拖 动 滚动 条 事件 是 指 当 浏览 者 上 下 拖 动 滚动 条 时 触发 的 事件 ， 可 以 通过 onScroll 来 进 
行 设 置 。 其 语法 结构 如 下 : 
< 开始 标签 onScrol1=" 参 数 和 参数 值 "></ 闭 合 标签 > 


其 中 ，onScroll=“ 参 数 和 参数 值 ”是 固定 形式 ， 里 面 的 参数 和 参数 值 的 格式 会 根据 不 
同 的 参数 而 出 现 不 同 。 

【示例 16.16】 下 面 是 使 用 onScroll 来 显示 拖 动 滚动 条 事件 被 触发 的 效果 。 代 码 如 下 : 

<body onScroll="alert (' 滚 动 条 位 置 发 生 改变 !' ) "> 

<!-- 定 义 触 发 事件 时 弹出 窗口 --> 

<img src="../images/13.3.jpg" " /> <br/> 

拖 动 滚动 条 事件 <br/> 

拖 动 滚动 条 事件 <br/> 

拖 动 滚动 条 事件 <br/> 

拖 动 滚动 条 事件 <br/> 

拖 动 深 动 条 事件 

</body> 


效果 如 图 16.16 所 示 。 
16.4.7 离开 页 面 事件 onUnload 


离开 页 面 事 件 是 指 当 浏览 者 结束 访问 网 页 而 离开 网 页 时 触发 的 事件 ， 可 以 通过 
onUnload 来 进行 设置 。onUnload 和 onBeforeUnload 意义 上 有 些 相 似 ， 不 同 之 处 在 于 ， 
onUnload 是 弹出 一 个 没有 选择 的 确定 窗口 , 而 onBeforeUnload 是 弹出 一 个 可 以 选择 的 确定 
或 取消 窗口 。 其 语法 结构 如 下 : 
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拖 动 滚动 条 事件 
拖 动 滚动 条 事件 
拖 动 滚动 条 事件 
拖 动 滚动 条 事件 


图 16.16 ”使 用 onScroll 显示 拖 动 滚动 条 时 触发 的 事件 效果 图 
< 开始 标签 onUnload=" 参 数 和 参数 值 ">></ 闭 合 标签 > 


其 中 ，onUnload=“ 参 数 和 参数 值 ”是 固定 形式 ， 里 面 的 参数 和 参数 值 的 格式 会 根据 
不 同 的 参数 而 出 现 不 同 。 

【示例 16.17】 下 面 是 使 用 onUnload 来 显示 离开 页 面 事件 的 效果 。 代 码 如 下 : 

<body onunload-"alert (" 你 将 要 离开 未 页 面 !") "> <!-- 定 义 触 发 事件 时 弹出 窗口 =-> 


离开 页 面 时 将 触发 onUnload 事件 
</body> 


效果 如 图 16.17 所 示 。 


Ss sles| 器 了 
(DOB ass - ox|Sam6r 


文件 (月 。 编 轮 (E) ”查看 (V) ” 收 蕊 夫 (A) 工具 (TM 帮助 (H) 


窑 
离开 页 面 时 将 触发 onUnload 事 件 


图 16.17 使 用 onUnload 显示 离开 页 面 时 触发 事件 效果 图 


16.5 表单 事件 


表单 事件 是 指 在 表单 上 做 某 一 动作 时 所 触发 的 事件 。 表 单 相 关 事件 包括 很 多 复杂 的 
JavaScript 程序 ， 本 节 将 以 最 简单 的 实例 来 讲述 各 个 表单 相关 事件 的 用 法 和 设置 。 


“241 。 


第 2 篇 CSS 样式 


16.5.1 选 定 元 素 失去 焦点 事件 onBlur 


通过 onBlur 来 进行 设置 。 onBlur 用 得 最 多 的 是 判断 输入 框 里 的 文本 内 容 是 否 符合 表单 的 要 
求 。 其 语法 结构 如 下 : 
< 开始 标签 onBlur=" 参 数 和 参数 值 "></ 闭 合 标签 > 


其 中 ，onBlur=“ 参 数 和 参数 值 ”是 固定 形式 ， 里面 的 参数 和 参数 值 的 格式 会 根据 不 同 
的 参数 而 出 现 不 同 。 

【示例 16.18】 下 面 是 使 用 onBlur 来 显示 元 素 失去 
文字 和 JavaScript 的 程序 。 在 文本 框 中 没有 填写 内 容 就 失去 焦点 时 ， 会 触发 onBlur 事件 ， 
弹出 系统 窗口 。 代 码 如 下 : 


<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 16.18</title> 
<script language="javascript"> 
<!--UavaScript 程序 开始 ， 定 义 文本 框 为 空 时 ， 弹 出 窗口 --> 
function chkvalue (txt) { 
if(txt.value=="") alert ("文本 框 里 必须 填写 内 容 !"); 


} 

</script> <!--JavaScript 程序 结束 -> 

</head> 

<body> 

<form name="blur test"> 

<p> 

姓名 <input type="text" name="name" value="" size="30" onblur="chkvalue 

(this) "><br> <! 一 -定义 触发 事件 时 弹出 窗口 --> 
性 别 <input type="text" name="sex" value="" size="30" onblur= 
"chkvalue (this)"><br> 
年 龄 <input type="text" name="age" value="" size="30" onblur= 
"chkvalue (this)"><br> 

住址 <input type="text" name="addr" value="" size="30" onblur= 
"chkvalue (this)"> 

</p> 

</form> 

</body> 


</html> 
效果 如 图 16.18 所 示 。 
16.5.2” 选 定 元 素 发 生 改变 事件 onChange 


选 定 元 素 发 生 改变 事件 是 指 当 改变 页 面 中 的 元 素 时 触发 该 事件 ， 例 如 改变 表单 中 的 数 
据 时 ， 可 以 通过 onChange 来 进行 设置 。onChange 和 onBlur 一 样 ， 都 是 要 鼠标 在 元 素 外 单 
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击 时 才能 触发 事件 。 其 语法 结构 如 下 : 
< 开始 标签 onChange=" 参 数 和 参数 值 ” ></ 闭 合 标签 > 
[aol x | 
了 © Ami618 x 二 


全 CQ 从 加 fileyW/F/bj/ 示 例 /第 窑 | 六 


姓名 
面 ， 
性 别 


年 龄 


文本 框 得 到 焦点 


当 文本 框 为 空 时 失去 


onBlur 事件 


图 16.18 ”使 用 onBlur 显示 元 素 失去 焦点 事件 效果 图 


其 中 ，onChange= “参数 和 参数 值 ”是 固定 形式 ， 里 面 的 参数 和 参数 值 的 格式 会 根据 
不 同 的 参数 而 出 现 不 同 。 

【示例 16.19】 下 面 是 使 用 onChange 来 显示 元 素 改变 事件 的 效果 。 这 里 添加 了 输入 框 、 
文字 。 当 输入 框 中 的 文字 发 生 改 变 时 ， 就 会 触发 onChange 事件 ， 弹 出 窗口 。 代 码 如 下 


<body> 


姓名 时 
<input type="text" id="fname" value=" 王 丽 " onblur="alert(' 请 勿 修改 姓名 !')" /> 


<!-- 定 义 触 发 事件 时 弹出 系统 窗口 --> 
</body> 


效果 如 图 16.19 所 示 。 
外 说 明 : 示例 16.19 中 ， 当 在 输入 框 中 修改 内 容 ， 就 会 弹出 系统 窗口 。 
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图 16.19 使 用 onChange 显示 触发 元 素 改变 事件 效果 图 


16.5.3 选 定 元 素 获得 焦点 事件 onFocus 


选 定 元 素 获 得 焦点 事件 是 指 当 元 素 获 得 焦点 时 触发 的 事件 ， 可 以 通过 onFocus 来 进行 


设置 。onFocus 用 得 最 多 的 是 ， 当 鼠标 单 击 输入 框 时 ， 输 入 框 会 发 生 一 些 变化 。 其 语法 结 
构 如 下 : 


< 开始 标签 onFocus=" 参 数 和 参数 值 ” ></ 闭 合 标签 > 
其 中 ，onFocus=“ 参 数 和 参数 值 ”是 固定 形式 ， 里 面 的 参数 和 参数 值 的 格式 会 根据 不 


同 的 参数 而 出 现 不 同 。 


框 、 


【示例 16.20】 下 面 是 使 用 onFocus 来 显示 元 素 获 得 焦点 事件 的 效果 。 这 里 添加 了 输入 
文字 。 当 输入 框 获得 焦点 时 ， 就 会 触发 onFocus 事件 。 代 码 如 下 
<head> 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 16.20</title> 

</head> 

<style type="text/css"> 

ESGXL 


border:1lpx #00ffff solid; 
} 
</style> 
<body> 
请 输入 姓名 : 
<input onFocus="this.className='text 1""/><br/> 
<!-- 定 义 触发 事件 时 弹出 系统 窗口 --> 
请 输入 年 龄 : 
<input onFocus="this.className='text 1""/> 
<!-- 定 义 触发 事件 时 弹出 系统 窗口 --> 
</body> 
</html> 


效果 如 图 16.20 所 示 。 


外 说 明 : 示例 中 改变 输入 框 颜色 的 做 法 ， 在 填写 表单 时 ， 都 是 比较 广泛 地 被 使 用 的 。 
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J © m1620 - 二 
文生 
| 请 输入 姓名 : 四 
请 输入 年 龄 : ee 
刚 打 开 页 面 时 ， 文 
EN 
J ©@ A9620 > 
C 在 filey//F:/bj/ 示 例 /第 16 章 /1 安 入 
请 输入 姓名 :正面 加 
请 输入 年 龄 : 当 文 本 框 获得 焦点 
时 ， 它 的 颜色 会 发 
[2) 生 改 变 


图 16.20 ”使 用 onFocus 显示 元 素 获 得 焦点 事件 效果 图 


16.5.4 ”表单 重 置 事件 onReset 


表单 重 置 事件 是 指 当 表单 中 元 素 被 重 置 时 触发 的 事件 , 可 以 通过 onReset 来 进行 设置 。 


其 语法 结构 如 下 : 
< 开始 标签 onReset=" 参 数 和 参数 值 "></ 闭 合 标签 > 


其 中 ，onReset=“ 参 数 和 参数 值 ”是 固定 形式 ， 里 面 的 参数 和 参数 值 的 格式 会 根据 不 


同 的 参数 而 出 现 不 同 。 


【示例 16.21】 下 面 是 使 用 onReset 来 显示 表单 被 重 置 事件 的 效果 。 这 里 添加 了 输入 框 、 


文字 和 一 个 重 置 按钮 。 但 单 击 重 置 按钮 时 ， 就 会 触发 onReset 事件 。 代 码 如 下 : 


<body> 
<form onreset="alert (' 你 将 要 清空 表单 !' ) "> 

<!-- 定 义 触发 重 置 按 钮 时 弹出 系统 窗口 --> 
姓名 : <input type="text" name="fname" /> <!-- 插 入 输入 框 --> 
RD 
性 别 : <input type="text" name="lname" /> <!-- 插 入 输入 框 --> 
<brE /><br /> 
<input type="reset" value=" 重 置 "> <!-- 揪 入 重 置 按钮 --> 
</form> 
</body> 


效果 如 图 16.21 所 示 。 


及 说明; 示例 16.21 中 ， 当 按 下 重 置 按钮 时 ， 就 会 弹出 系统 窗口 ， 如 图 16.21 所 示 。 


16.5.5 ”表单 提交 事件 onSubmit 


表单 提交 事件 是 指 当 表单 中 的 元 素 被 提交 时 触发 的 事件 ， 也 就 是 当 单 击 提交 按钮 时 触 
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发 的 事件 ， 可 以 通过 onSubmit 来 进行 设置 。 其 语法 结构 如 下 : 


安 | 忆 


图 16.21 使 用 onReset 显示 表单 被 重 置 事件 效果 图 
< 开始 标签 onSubmit=" 参 数 和 参数 值 "></ 闭 合 标签 > 


其 中 ，onSubmit=“ 参 数 和 参数 值 ” 是 固定 形式 ， 里 面 的 参数 和 参数 值 的 格式 会 根据 不 
同 的 参数 而 出 现 不 同 。 

【示例 16.22】 下 面 是 使 用 onSubmit 来 显示 表单 被 提交 事件 的 效果 。 这 里 添加 了 输入 框 
和 文字 。 由 于 这 里 的 代码 只 需要 放 在 <body> 标 签 里 面 ， 所 以 给 出 的 代码 只 是 放 在 <body> 标 
签 里 面 的 代码 。 代 码 如 下 : 


<body> 
<form name="testform" onsubmit="alert(' 您 的 留言 已 提交 成 功 !')"> 
<! 一 -定义 触发 发 送 按钮 时 弹出 窗口 --> 
留言 板 :<br /> 
<textarea name="fname" id="txt" cols="40" rows="6"></textarea> 
<!-- 插 入 文本 区 域 --> 
<br /> 
<input type="submit" value=" 发 送 " /> <!-- 插 入 发 送 按钮 --> 
</form> 
</body> 


效果 如 图 16.22 所 示 。 


OAm622 x 四 
所 了 C 和 @file/WFVbj/ 示 例 /第 16 音 /16.22.html 安 六 


留言 板 : 
你 好 啊 


图 16.22 使 用 onSubmit 显示 表单 被 提交 事件 效果 图 
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全 说 明 : 在 示例 16.22 中 ， 单 击 弹 出 窗口 的 “确定 ”按钮 ， 留 言 板 内 容 就 会 被 清空 。 


16.6 滚动 字幕 事件 


滚动 字幕 事件 是 指 在 活动 字幕 里 做 某 一 动作 时 所 触发 的 事件 。 滚 动 字幕 事件 包括 很 多 
复杂 的 JavaScript 程序 ， 本 节 将 以 简单 的 实例 来 讲述 各 个 滚动 字幕 事件 的 用 法 和 设置 。 


16.6.1 字幕 内 容 滚动 至 显示 范围 之 外 事件 onBounce 


字幕 内 容 滚 动 至 显示 范围 之 外 事件 是 指 当 滚 动 字幕 里 的 内 容 滚 动 到 显示 范围 之 外 时 
触发 的 事件 ， 可 以 通过 onBounce 来 进行 设置 。 由 于 onBounce 是 用 来 设置 滚动 字幕 的 ， 所 
以 该 事件 要 放 在 <marquee> 标 签 里 面 。 其 语法 结构 如 下 。 

<marquee onbounce=" 参 数 和 参数 值 ">></marquee> 


其 中 ，onBounce=“ 参 数 和 参数 值 ”是 固定 形式 ， 里 面 的 参数 和 参数 值 的 格式 会 根据 
不 同 的 参数 而 出 现 不 同 。 

【示例 16.23】 下 面 是 使 用 onBounce 来 显示 字幕 内 容 滚动 至 显示 范围 之 外 事件 的 效果 。 
这 里 添加 了 文字 和 一 些 滚动 字幕 设置 。 代 码 如 下 : 

<body> 

<marquee behavior="scroll"” onbounce="alert ( "滚动 内 容 超 显示 范围 ! ') "” width= 

"300px" > <!-- 设 置 滚动 字幕 循环 滚动 ， 设 置 滚动 的 宽度 ， 定 义 触 发 事件 时 弹出 系统 窗口 --> 

字幕 内 容 滚动 至 显示 范围 之 外 事件 onBounce 

</marquee> 

</body> 


效果 如 图 16.23 所 示 。 
[le za 


(DD 外 Fpl16m\: P ~ © Xx | @ m1623 


文件 (。 演 得 (E) ”查看 (V) 收 苔 夫 (A) ”工具 (T) ”帮助 (H) 


字幕 内 容 滚动 至 显示 范围 之 外 事件 onBounce 


图 16.23 使 用 onBounce 显示 滚动 内 容 滚动 至 显示 范围 之 外 事件 效果 图 


外 说 明 : 示例 16.23 中 ， 当 内 容 移 到 滚动 字幕 的 边缘 就 会 弹出 系统 窗口 。 
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16.6.2 ”完成 需要 显示 的 内 容 后 事件 onFinish 


完成 需要 显示 的 内 容 后 事件 是 指 当 滚动 字幕 中 需要 显示 的 内 容 已 全 部 显示 完成 后 触 
发 的 事件 ， 可 以 通过 onFinish 来 进行 设置 。 由 于 onFinish 是 用 来 设置 滚动 字幕 的 ， 所 以 该 
事件 要 放 在 <marquee> 标 签 里 面 。 其 语法 结构 如 下 : 

<marquee onFinish=" 参 数 和 参数 值 "></marquee> 


其 中 ，onFinish=“ 参 数 和 参数 值 ”是 固定 形式 ， 里 面 的 参数 和 参数 值 的 格式 会 根据 不 
同 的 参数 而 出 现 不 同 。 

【示例 16.24】 下 面 是 使 用 onFinish 来 显示 完成 需要 显示 的 内 容 后 事件 的 效果 。 这 里 添 
加 了 文字 和 一 些 滚动 字幕 设置 。 当 滚动 字幕 中 需要 显示 的 内 容 已 全 部 显示 完成 后 ， 就 会 角 
发 onFinish 事件 。 代 码 如 下 : 

<body> 

<marquee behavior="slide" onfinish="alert(' 内容 已 全 部 显示 完毕 !1')" 

width="300" > 

<!-- 定 义 触发 事件 时 弹出 系统 窗口 ， 设 置 滚动 字幕 的 宽度 和 滚动 到 一 边 停止 --> 
触发 完成 需要 显示 的 内 容 后 事件 


</marquee> 
</body> 


效果 如 图 16.24 所 示 。 


lela| wo 
(HY 全 NbNFWS168\: P ~ OX ||@ 示 W1624 
文件 (月 ” 乱 罚 (E) ”查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 


触发 完成 需要 显示 的 内 容 后 事件 


来 自 网 页 的 消息 


全 内 容 已 全 部 显示 完毕 ! 


臣 100% ~ 


图 16.24 使 用 onFinish 显示 完成 需要 显示 的 内 容 后 事件 效果 图 


外 说 明 : 示例 中 ， 当 滚动 内 容 显 示 完 ， 就 会 弹出 系统 窗口 ， 如 图 16.24 所 示 。 


16.6.3 ”开始 显示 内 容 事件 onStart 


开始 显示 内 容 事件 是 指 当 滚动 字幕 需要 显示 的 内 容 开 始 显示 时 触发 的 事件 ， 可 以 通过 
onStart 来 进行 设置 。 由 于 onStart 是 用 来 设置 滚动 字幕 的 ， 所 以 该 事件 要 放 在 <marquee> 标 
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让 


有 E 面 。 其 语法 结构 如 下 : 
<marquee onStart=" 参 数 和 参数 值 "></marquee> 


其 中 ，onStart=“ 参 数 和 参数 值 ”是 固定 形式 ,里面 的 参数 和 参数 值 的 格式 会 根据 不 同 
的 参数 而 出 现 不 同 。 

【示例 16.25】 下 面 是 使 用 onStart 来 显示 滚动 字幕 需要 显示 的 内 容 开始 显示 时 触发 的 事 
件 。 这 里 添加 了 文字 和 一 些 滚 动 字 幕 设置 。 当 滚动 字幕 需要 显示 的 内 容 开 始 显示 时 ， 就 会 
触发 onStart 事件 。 代 码 如 下 : 

<body> 

<marquee onStart="alert (滚动 字幕 开始 滚动 ! ') " width="300" behavior="scroll"> 

<!-- 定 义 触发 事件 时 弹出 系统 窗口 ， 设 置 深 动 字幕 的 宽度 和 反复 滚动 --> 
滚动 字幕 需要 显示 的 内 容 开 始 显示 触发 onStart 事件 


</marquee> 


效果 如 图 16.25 所 示 。 


已 ] 回 | 加 
八国 EEC ET 


文件 (月 ” 往 福 {日 查看 (V) 收藏 夫 (A) ”工具 (T) 帮助 (” 


来 自 网 页 的 消息 


全 造 动 字幕 开始 滚动 


胞 100% ~ 


图 16.25 使 用 onStart 显示 开始 显示 内 容 事件 效果 图 


名 说 明 : 示例 16.25 中 ， 当 滚动 字幕 需要 显示 的 内 容 开 始 显示 时 就 会 弹出 窗口 。 


16.7 编辑 事件 
编辑 事件 是 指 当 页 面 内 容 被 编辑 时 触发 的 事件 ， 例 如 复制 、 粘 贴 等 。 编 辑 事件 包括 很 
多 复杂 的 JavaScript 程序 ， 本 节 将 以 简单 的 实例 来 讲述 各 个 编辑 事件 的 用 法 和 设置 。 
16.7.1 出 现 菜单 事件 onContextMenu 


出 现 菜单 事件 是 指 当 按 下 鼠标 右键 出 现 菜单 时 ， 或 者 通过 键盘 的 按键 打开 页 面 菜单 时 
触发 的 事件 ， 可 以 通过 onContextMenu 进行 设置 。 这 个 事件 可 以 通过 复杂 的 编程 来 禁止 使 
用 右键 或 是 重新 设置 右键 的 菜单 。 由 于 它 是 用 来 控制 页 面 的 内 容 的 ， 所 以 onContextMenu 
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应 该 放 在 <body> 标 签 里 面 。 其 语法 结构 如 下 : 


<body onContextMenu=" 人 参数 和 参数 值 ') "></body> 


其 中 ，onContextMenu=“ 参 数 和 参数 值 ”是 固定 形式 ， 里 面 的 参数 和 参数 值 的 格式 会 
根据 不 同 的 参数 而 出 现 不 同 。 

【示例 16.26】 下 面 是 使 用 onContextMenu 来 显示 出 现 菜 单 事件 的 效果 。 由 于 这 里 的 代 
码 只 需要 放 在 <body> 标 签 里 面 ， 所 以 给 出 的 代码 只 是 放 在 <body> 标 签 里 面 的 代码 。 代 码 
如 下 : 


<body onContextMenu="alert (' 请 勿 使 用 右键 ! ' ) "> <!-- 触 发 事件 时 弹出 窗口 --> 


当 按 下 鼠标 右键 出 现 菜 单 时 或 者 通过 键盘 的 按键 打开 页 面 菜 单 时 触发 事件 onContextMenu 
</body> 


效果 如 图 16.26 所 示 。 


[sll a9 
个 司 Pb 入 16g P » OX | @ A91626 


文件 (有 ”篇 缠 (E) 查看 (V) ”站 茂 夫 人) ”工具 (T) 帮助 (H) 


当 按 下 鼠标 右键 出 现 菜单 时 或 者 通过 键盘 的 按键 打 
开 页 面 菜单 时 触发 事件 onContextMenu 


来 自 网 页 的 消息 


全 请 勿 使 用 右键 1 


http://www.microsofttranslator.com/BV.aspx?r 胞 100% ~ 


图 16.26 ”使 用 onContextMenu 显示 出 现 菜单 事件 效果 图 


外 说 明 : 示例 16.26 中 ， 由 于 没有 使 用 编程 来 对 右键 进行 控制 ， 当 在 弹出 的 系统 窗口 中 按 
了 “确定 ”按钮 后 ， 又 会 自动 出 现 右 键 菜单 。 


16.7.2 内容 被 复制 后 事件 onCopy 


内 容 被 复制 后 事件 是 指 当 页 面 中 的 内 容 被 复制 后 触发 的 事件 ， 可 以 通过 onCopy 来 进 
行 设置 。 可 以 通过 这 个 事件 用 来 防止 页 面 内 容 被 复制 。 其 语法 形式 如 下 : 

<body onCopy=" 参 数 和 参数 值 ') "></body> 

其 中 ，onCopy=“ 参 数 和 参数 值 ”是 固定 形式 ， 里 面 的 参数 和 参数 值 的 格式 会 根据 不 
同 的 参数 而 出 现 不 同 。 

【示例 16.27】 下 面 是 使 用 onCopy 来 显示 内 容 被 复制 后 事件 的 效果 。 代 码 如 下 : 


<body onCopy="alert (' 不 能 复制 此 内 容 !')"> <!-- 触 发 事件 时 弹出 窗口 --> 
内 容 被 复制 后 触发 onCopy 事件 


"Ns 
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</body> 


效果 如 图 16.27 所 示 。 
[Eel | 
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不 能 复制 
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图 16.27 使 用 onCopy 显示 内 容 被 复制 后 事件 效果 图 


名 说明: 无 论 是 使 用 鼠标 进行 复制 还 是 使 用 键盘 进行 复制 ， 都 可 以 出 现 图 16.27 所 示 的 
效果 。 


16.7.3 ”内容 被 剪 切 时 事件 onCut 


内 容 被 剪 切 时 事件 是 指 页 面 中 被 选择 的 内 容 被 剪 切 时 触发 的 事件 ， 可 以 通过 onCut 来 
进行 设置 。 可 以 通过 这 个 事件 来 防止 页 面 内 容 被 剪 切 。 其 语法 结构 如 下 : 

< 开始 标签 onCut=" 参 数 和 参数 值 ') "></ 闭 合 标签 > 

其 中 ，onCut=“ 参 数 和 参数 值 ”是 固定 形式 ， 里 面 的 参数 和 参数 值 的 格式 会 根据 不 同 
的 参数 而 出 现 不 同 。 

【示例 16.28】 下 面 是 使 用 onCut 来 显示 内 容 被 剪 切 时 事件 的 效果 。 这 里 添加 了 输入 文 
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本 域 。 代 码 如 下 : 


<textarea name="textarea" id="textarea" cols="45" rows="5" onCut="alert(" 
你 将 剪 切 文本 内 容 !') "> 
</textarea> <!-- 设 置 输入 文本 域 ， 定 义 触 发 事件 时 弹出 窗口 --> 


效果 如 图 16.28 所 示 。 
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义 件 (P。 葬 伍 (E) 过 看 (V) 趣 硫 六 (A) 工具 (T) 帮助 0 
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图 16.28 ”使 用 onCut 显示 被 选择 内 容 被 剪 切 时 事件 效果 图 


外 说 明 : 示例 16.28 中 ， 由 于 没有 使 用 编程 来 进行 控制 ， 当 在 弹出 的 系统 窗口 中 按 了 “ 确 
定 ”按钮 后 ， 选 中 的 内 容 还 是 会 被 剪 切 。 


16.7.4 鼠标 拖 动 时 事件 onDrag 


鼠标 拖 动 时 事件 是 指 页 面 中 选择 的 内 容 被 鼠标 拖 动 时 触发 的 事件 ， 可 以 通过 onDrag 
来 进行 设置 。 可 以 通过 这 个 事件 来 防止 页 面 内 容 被 拖 动 。 其 语法 结构 如 下 : 

<body onDrag=" 参 数 和 参数 值 ') "></body> 

其 中 ，onDrag=“ 参 数 和 参数 值 ”是 固定 形式 ， 里 面 的 参数 和 参数 值 的 格式 会 根据 不 
同 的 参数 而 出 现 不 同 。 

【示例 16.29】 下 面 是 使 用 onDrag 来 显示 鼠标 拖 动 时 事件 的 效果 。 代 码 如 下 : 

<body onDrag-"alert (' 请 勿 拖 动 页 面 内 容 !') "> <! 一 -触发 事件 时 弹出 窗口 --> 
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页 面 中 选择 的 内 容 被 鼠标 拖 动 时 触发 onDrag 事件 
</body> 


效果 如 图 16.29 所 示 。 


[LEIEBTR 
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页 面 中 选择 的 内 容 被 鼠标 EEEIEIESREWras 事 件 


图 16.29 使 用 onDrag 显示 鼠标 拖 动 时 事件 效果 图 


16.7.5 ”失去 鼠标 移动 所 形成 选择 焦点 时 事件 onLoseCapture 


失去 鼠标 移动 所 形成 选择 焦点 时 事件 是 指 用 鼠标 在 页 面 中 选择 内 容 后 松 开 鼠标 时 触 
发 的 事件 ， 可 以 通过 onLoseCapture 来 进行 设置 。 其 语法 结构 如 下 : 

<body onLoseCapture=" 人 参数 和 参数 值 ') "></body> 

其 中 ，onLoseCapture=“ 人 参数 和 参数 值 ”是 固定 形式 ， 里 面 的 参数 和 参数 值 的 格式 会 
根据 不 同 的 参数 而 出 现 不 同 。 

【示例 16.30】 下 面 是 使 用 onLoseCapture 来 显示 选择 内 容 后 松 开 鼠 标 事件 的 效果 。 代 
码 如 下 : 


<body onLoseCapture="alert (' 您 选择 了 页 面 内 容 ， 并 松 开 了 鼠标 ! " ) "> 
<!-- 触 发 事件 时 弹出 窗口 --> 


在 页 面 中 选择 内 容 后 松 开 鼠 标 时 触发 onLoseCapture 事件 
</body> 


效果 如 图 16.30 所 示 。 


图 16.30 使 用 onLoseCapture 显示 选择 内 容 后 松 开 鼠 标 事件 效果 图 
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外 说 明 : 示例 16.30 中 ， 当 饼 标 选择 内 容 ， 再 松 开 鼠 标 后， 就 会 弹出 系统 窗口 ， 如 图 16.30 
所 示 。 


16.7.6 ”内容 被 粘贴 时 事件 onPaste 


内 容 被 粘贴 时 事件 是 指 当 复制 的 内 容 被 粘贴 在 页 面 中 时 触发 的 事件 , 可 以 通过 onPaste 
来 进行 设置 。 可 以 通过 这 个 事件 来 防止 在 页 面 中 进行 粘贴 。 其 语法 结构 如 下 : 
< 开始 标签 onPaste=" 参 数 和 参数 值 ') "></ 闭 合 标签 > 


其 中 ，onPaste=“ 人 参数 和 参数 值 ”是 固定 形式 ， 里 面 的 参数 和 参数 值 的 格式 会 根据 不 
同 的 参数 而 出 现 不 同 。 

【示例 16.31】 下 面 是 使 用 onPaste 来 显示 内 容 被 粘贴 时 事件 的 效果 。 由 于 在 网 页 上 ， 
一 般 都 不 可 以 对 其 内 容 进行 粘贴 ， 而 在 输入 框 中 才 可 以 对 其 内 容 进 行 粘贴 ， 所 以 onPaste 
应 该 放 在 输入 框 标签 里 面 。 这 里 添加 了 输入 文本 域 。 代 码 如 下 : 


<body > 

<textarea name="textarea" id="textarea" cols="45" rows="5" onPaste= 
"malert (' 您 正在 粘贴 文本 内 容 !"') "> 

</textarea> <!-- 设 置 输入 文本 域 ， 定 义 触发 事件 时 弹出 窗口 --> 
</body> 


效果 如 图 16.31 所 示 。 


D 未 W1631 x 
4 访 C 省 Ofile///FVbj/ 示 例 /第 16 章 /16.31.html 窑 以 


图 16.31 使 用 onPaste 显示 内 容 被 粘贴 时 事件 效果 图 


且说 明 : 示例 16.33 中 ， 当 在 文本 框 里 粘贴 内 容 时 ， 就 会 弹出 系统 窗口 ， 如 图 16.31 所 示 。 


16.7.7 ”内容 被 选择 时 事件 onSelect 


内 容 被 选择 时 事件 是 指 当 页 面 中 的 内 容 被 选择 时 触发 的 事件 ， 可 以 通过 onSelect 来 进 
行 设置 。 由 于 它 是 用 来 控制 页 面 的 内 容 的 ， 所 以 onSelect 应 该 放 在 <body> 标 签 里 面 。 其 语 
法 形式 如 下 : 
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<body onSelect=" 参 数 和 参数 值 ' ) "></body> 

其 中 ，onSelect=“ 参 数 和 参数 值 ”是 固定 形式 ， 里 面 的 参数 和 参数 值 的 格式 会 根据 不 
同 的 参数 而 出 现 不 同 。 

【示例 16.32】 下 面 是 使 用 onSelect 来 显示 内 容 被 选择 时 事件 的 效果 。 代 码 如 下 : 


<body onSelect="alert (' 你 选择 了 页 面 内 容 !')"> <!-- 触 发 事件 时 弹出 窗口 --> 
页 面 内 容 被 选择 时 触发 onselect 事件 
</body> 


效果 如 图 16.32 所 示 。 


rr 
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图 16.32 使 用 onSelect 显示 内 容 被 选择 时 事件 效果 图 


外 说 明 : 示例 16.32 中 ， 当 和 鼠标 选择 了 页 面 内 容 后 ， 就 会 弹出 系统 窗口 ， 如 图 16.32 所 示 。 


16.7.8 ”内 容 选 择 将 开始 发 生 时 事件 onSelectStart 


内 容 选 择 将 开始 发 生 时 事件 是 指 当 页 面 内 容 将 要 开始 被 选择 时 触发 的 事件 ， 可 以 通过 
onSelectStart 来 进行 设置 。 由 于 它 是 用 来 控制 页 面 的 内 容 的 ， 所 以 onSelectStart 应 该 放 在 
<body> 标 签 里 面 。 语 法 形式 如 下 : 


<body onSelectStart=" 参 数 和 参数 值 ') "></body> 

其 中 ，onSelectStart=“ 参 数 和 参数 值 ”是 固定 形式 ， 里 面 的 参数 和 参数 值 的 格式 会 根 
据 不 同 的 参数 而 出 现 不 同 。 

【示例 16.33】 下 面 是 使 用 onSelectStart 来 显示 页 面 内 容 将 要 开始 被 选择 时 触发 的 事件 
的 效果 。 代 码 如 下 : 

<body onSelectStart="alert ('" 你 将 要 开始 选择 页 面 内 容 !') "> <!-- 触 发 事件 时 弹出 窗口 


> 
当 页 面 内 容 将 要 开始 被 选择 时 触发 onSelectStart 事件 
</body> 


效果 如 图 16.33 所 示 。 
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@ W1633 " \V 
全 言 CO 在 Ofile///FVbj/ 示 例 /第 168 究 外 


当 页 面 内 容 将 要 开始 被 选择 时 触发 
onSelectStart 事 件 


图 16.33 ”使 用 onSelectStart 显示 页 面 内 容 将 要 开始 被 选择 时 触发 的 事件 效果 图 


全 说 明 : 示例 16.33 中 ， 当 鼠标 要 开始 选择 页 面 内 容 时， 就 会 弹出 系统 窗口 ， 如 图 16.33 
所 示 。 


16.8 数据 绑 定 


数据 绑 定 是 指 页 面 内 容 和 数据 源 之 间 发 生 某 一 动作 而 触发 的 事件 。 我 们 都 知道 大 多 数 
的 数据 源 都 来 自 数 据 库 ， 因 此 数据 绑 定 所 触发 的 事件 需要 和 数据 库 进 行 绑 定 才 可 以 使 用 。 
由 于 本 书 讲述 的 是 HIML 和 XHTML 语言 , 没 涉及 到 数据 库 ， 所 以 在 使 用 和 讲解 上 ， 本 节 
只 做 一 个 简单 的 介绍 ， 将 不 会 举例 说 明和 对 触发 事件 进行 详细 的 讲解 。 


1. 数据 完成 由 数据 源 到 对 象 的 传送 事件 onAfterUpdate 


数据 完成 由 数据 源 到 对 象 的 传送 事件 是 指 当 数据 完成 从 数据 源 传 送 到 响应 的 页 面 元 
素 时 所 触发 的 事件 ， 可 以 通过 onAfterUpdate 来 进行 设置 。 


2. 数据 来 源 发 生变 化 时 事件 onCellChange 


数据 来 源 发 生变 化 时 事件 是 指 当 数据 的 来 源 发 生变 化 时 触发 的 事件 ， 可 以 通过 
onCellChange 来 进行 设置 。 


3. 数据 接收 完成 时 事件 onDataAvailable 


触发 数据 接收 完成 时 事件 是 指 当 数据 从 数据 源 接收 完成 时 触发 的 事件 ， 可 以 通过 
onDataAvailable 来 进行 设置 。 


4. 数据 源 发 生变 化 时 事件 onDatasetChanged 


数据 源 发 生变 化 时 事件 是 指 当 提供 数据 的 数据 源 发 生变 化 时 触发 的 事件 ， 可 以 通过 
onDatasetChanged 来 进行 设置 。 
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5. 全 部 有 效 数 据 读 取 完 毕 事 件 onDatasetComplete 

全 部 有 效 数据 读 取 完毕 事件 是 指 当 页 面 中 的 有 效 数据 全 部 读 取 完毕 时 触发 的 事件 ， 可 
以 通过 onDatasetComplete 来 进行 设置 。 

6. 取消 数据 传送 事件 onBeforeUpdate 

取消 数据 传送 事件 用 来 取消 数据 传送 ， 可 以 通过 onBeforeUpdate 来 进行 设置 。 

7. 取消 数据 传送 时 ， 蔡 代 onAfterUpdate 事 件 onErrorUpdate 


取消 数据 传送 时 ， 替 代 onAfterUpdate 事件 是 指 当 使 用 onBeforeUpdate 事件 触发 取消 
了 数据 传送 时 ，onErrorUpdate 事件 用 来 代替 onAfterUpdate 事件 。 


16.9 外 部 事件 


外 部 事件 是 指 在 页 面 内 容 范 围 之 外 做 某 一 动作 时 而 触发 的 事件 。 外 部 事件 包括 很 多 复 
杂 的 JavaScript 程序 ， 本 节 将 以 简单 的 实例 来 讲述 各 个 外 部 事件 的 用 法 和 设置 。 


16.9.1 文档 被 打印 后 事件 onAfterPrint 


文档 被 打印 后 事件 是 指 当 页 面 内 容 被 打印 完成 后 所 触发 的 事件 , 可 以 通过 onAfterPrint 
来 进行 设置 。 由 于 它 是 用 来 打印 页 面 的 内 容 的 ， 所 以 onAfterPrint 应 该 放 在 <body> 标 签 里 
面 。 其 语法 结构 如 下 : 

<body onAfterPrint=" 参 数 和 参数 值 ') "></body> 


其 中 ，onAfterPrint=“ 参 数 和 参数 值 ” 是 固定 形式 ， 里 面 的 参数 和 参数 值 的 格式 会 根 
据 不 同 的 参数 而 出 现 不 同 。 

【示例 16.34】 下 面 是 使 用 onAfterPrint 来 显示 文档 被 打印 后 事件 的 效果 。onAfterPrint 
在 正和 Firefox 里 触发 的 事件 不 同 ,在 正 里 是 页 面 还 没 被 打印 就 触发 了 事件 , 而 在 Firefox 
里 是 页 面 要 被 打印 完 才 会 触发 事件 ,但 因为 出 现 的 画面 是 一 样 的 ,所 以 只 给 出 正 的 效果 图 。 
代码 如 下 : 

<body onBeforePrint="alert (' 本 页 已 打印 完毕 !')"> <!-- 触 发 事件 时 弹出 窗口 --> 


文档 被 打印 完 后 onBeforePrint 触发 事件 
</body> 


效果 如 图 16.34 所 示 。 
16.9.2 文档 即将 被 打印 时 事件 onBeforePrint 


文档 即将 被 打印 时 事件 是 指 当 页 面 内 容 将 要 被 打印 时 所 触发 的 事件 ， 可 以 通过 
onBeforePrint 来 进行 设置 。 由 于 它 是 用 来 打印 页 面 的 内 容 的 ， 所 以 onBeforePrint 应 该 放 在 
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<body> 标 签 里 面 。 其 语法 结构 如 下 : 


<body onBeforePrint=" 人 参数 和 参数 值 ') "></body> 


其 中 ，onBeforePrint=“ 参 数 和 参数 值 ” 是 固定 形式 ， 里 面 的 参数 和 参数 值 的 格式 会 根 
据 不 同 的 参数 而 出 现 不 同 。 

【示例 16.3S】 下 面 是 使 用 onBeforePrint 来 显示 文档 即将 被 打印 时 事件 的 效果 。 代 码 
如 下 : 


<body onBeforePrint="alert (您 正在 ' 准 备 打 印 本 页 面 !') "> 


<!-- 触 发 事件 时 弹出 窗口 --> 
文档 将 被 打印 时 触发 onBeforePrint 事件 
</body> 


效果 如 图 16.35 所 示 。 


| 回 | 吧 
人 司 RbNRSNS16S P - CX|| 个 示 风 


文件 (F) ” 骗 强 (E) ”查看 (V) ”收藏 夫 (A) 工具 (T 帮 ” 
文档 被 打印 完 后 onBeforePrint 触 发 事件 
来 自 网 页 的 消息 


Ilesl®| 有 


Ca 国 FAbi 示 9 第 16 草 : DD -0 Xx | 到 


文件 [六 各 (E) ”查看 (V) 收藏 夫 (A) 工具 (T 帮 ” 


文档 将 被 打印 时 触发 snBeforePrint 事 件 


来 自 网 页 的 消息 


企 Ee 企 您 正在 装备 打印 本 页 面 ! 


图 16.34 ”使 用 onAfterPrint 显示 文档 被 打印 后 图 16.35 ”使 用 onBeforePrint 显示 文档 即将 打 
事件 效果 图 印 时 事件 效果 图 


外 说 明 : 示例 16.35 中 ， 当 页 面 按 到 “打印 ”时 ， 就 会 弹出 系统 窗口 ， 如 图 16.35 所 示 。 


16.9.3 ” 滤 镜 效果 发 生变 化 时 事件 onFilterChange 


滤 镜 效果 发 生变 化 时 事件 是 指 当 页 面 内 容 的 滤 镜 效果 发 生 改变 时 触发 的 事件 ， 可 以 通 
过 onFilterChange 来 进行 设置 。 其 语法 结构 如 下 : 
< 开始 标签 onFilterChange=" 人 参数 和 参数 值 ') "></ 闭 合 标签 > 


其 中 ，onFilterChange=“ 人 参数 和 参数 值 ”是 固定 形式 ， 里 面 的 参数 和 参数 值 的 格式 会 
根据 不 同 的 参数 而 出 现 不 同 。 

【示例 16.36】 下 面 是 使 用 onFilterChange 来 显示 滤 镜 效果 发 生变 化 时 事件 的 效果 。 这 
里 将 用 JavaScript 程序 来 配合 触发 滤 镜 效果 发 生变 化 时 事件 。 这 里 添加 了 文字 和 图 片 ， 图 
片 使 用 images 文件 夹 里 的 5.5jpg。 代 码 如 下 : 

<head> 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 16.36</title> 


<script type="text/javascript"> <!--JavaScript 程序 开始 ， 设 置 滤 镜 效 果 --> 
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function ljchange (obj) 
{ 
with(obj.filters (0)) 
if (strength<255) 
人 
strength +=2; 
direction +=45; 
} 
E 
} 


</script> <!--JavaScript 程序 结束 --> 
</head> 

<body> 

原来 的 图 :<br/> 

<img id ="imagesl" src="../images/5.5.jpg"><br/><br/><br/> 


滤 镜 效果 发 生变 化 后 的 图 :<br /> 
<img id ="imagesl" src="../images/5.5.jpg" onfilterchange="ljchange (this)" 
style="filter:blur (strength=1)"> 
<!-- 触 发 事件 时 调用 JavaScript 程序 --> 
</body> 


效果 如 图 16.36 所 示 。 


本 [eS me) 
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滤 绩 效果 发 生变 化 后 的 国 : 
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图 16.36 ”使 用 onFilterChange 显示 滤 镜 效果 发 生变 化 时 事件 效果 图 


.9.4 按 下 F1 或 者 帮助 选择 时 事件 onHelp 


按 下 Fl 或 者 帮助 选择 时 事件 是 指 在 页 面 中 按 下 Fl 功能 键 或 者 浏览 器 中 选择 “帮助 ” 
时 所 触发 的 事件 ， 可 以 通过 onHelp 来 进行 设置 。 由 于 它 是 用 来 控制 页 面 的 内 容 的 ， 所 


以 onHelp 应 该 放 在 <body> 标 签 里 面 。 语 法 形式 如 下 : 


<body onHelp=" 参 数 和 参数 值 ' ) "></body> 
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其 中 ，onHelp=“ 参 数 和 参数 值 ”是 固定 形式 ， 里 面 的 参数 和 参数 值 的 格式 
同 的 参数 而 出 现 不 同 。 

【示例 16.37】 下 面 是 使 用 onHelp 来 显示 按 下 Fl 或 者 帮助 选择 时 事件 的 效 
如 下 : 


会 根据 不 


果 。 代 码 


<body onHelp="alert(' 您 正 要 打开 帮助 文件 !') "> <!-- 触 发 事件 时 弹出 窗口 --> 


按 下 F1 或 者 帮助 选择 时 触发 onHelp 事件 
</body> 


效果 如 图 16.37 所 示 。 
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来 自 网 页 的 消息 


全 您 正 要 打开 帮助 文件 ! 
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图 16.37 使 用 onHelp 显示 按 下 F1 或 者 帮助 选择 时 事件 效果 图 


16.9.5 “对象 的 属性 之 一 发 生变 化 时 事件 onPropertyChange 


对 象 的 属性 之 一 发 生变 化 时 事件 是 指 当 页 面 中 的 元 素 发 生变 化 时 所 触发 的 事 
通过 onPropertyChange 来 进行 设置 。 其 语法 结构 如 下 : 
< 开始 标签 onPropertyChange=" 参 数 和 参数 值 ') "></ 闭 合 标签 > 


其 中 ，onPropertyChange=“ 参 数 和 参数 值 ” 是 固定 形式 ， 里 面 的 参数 和 参数 
会 根据 不 同 的 参数 而 出 现 不 同 。 

【示例 16.38】 下 面 是 使 用 onPropertyChange 来 显示 对 象 的 属性 之 一 发 生变 化 
效果 。onPropertyChange 用 得 较 多 的 是 输入 框 里 的 内 容 发 生变 化 。 这 是 
onPropertyChange 和 JavaScript 程序 检查 输入 框 是否 有 输入 内 容 , 当 两 个 输入 框 都 
时 ， 按 钮 显示 可 以 按 下 状态 。 这 里 添加 了 文字 、 输 入 框 和 按钮 。 代 码 如 下 : 


<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-— 


<title> 示 例 16.38</title> 


件 ， 可 以 


值 的 格式 
时 事件 的 


有 将 使 用 
输入 内 容 


8" /> 


<script language="javascript"> <!--JavaScript 程序 开始 ， 检 查 输入 框 是 否 有 输入 
内 容 ， 当 两 个 输入 框 都 输入 内 容 时 按钮 显示 可 以 按 下 状态 --> 


function check(){ 
subl.disabled= (txt1l1.value==""| 1txt2 .value=="") 
} 
</script> <!--JavaScript 程序 结束 --> 
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</head> 
<body > <! 一 -触发 事件 时 弹出 窗口 --> 
<input name="txtl" onpropertychange="check()" /> 

<! 一 -触发 事件 时 调用 JavaScript 程序 --> 
<input name="txt2" onpropertychange="check()" /> 

<!-- 触 发 事件 时 调用 JavaScript 程序 --> 
<input type="submit" name="subl" value=" 确 定 " disabled="disabled" /> 

<!-- 调 用 JavaScript 程序 --> 

</body> 


效果 如 图 16.38 所 示 。 


Ex 
(DO Een p- ox] Sma 
文件 中 。 输 问 (E) 查看 V) ”收藏 严 (A) 工具 (T) 帮助 (- 


1 
确定 | 


只 输入 单个 输入 框 
内 容 ， 按 钮 为 灰色 ， 
不 能 按 下 


我 100% ~ 
ET 
(DOB P- ox]|GSame63 
文 作 (P。 纺 名 (E) ”查看 (V) 收藏 实 (A) 工具 (1) 帮助 小” 


1 本 
确定 


两 个 输入 框 都 填写 
了 才 可 以 按 下 按钮 


图 16.38 ”使 用 onPropertyChange 显示 对 象 的 属性 之 一 发 生变 化 时 事件 效果 图 


16.10 本 章 小 结 


本 章 主要 学 习 了 HIML 中 的 事件 , 详细 介绍 了 网 页 中 的 各 种 触发 事件 , 包括 鼠标 事件 、 
键 稻 事 件 、 页 面 事件 、 表 单 事件 、 滚 动 字幕 事件 、 编 辑 事件 、 外 部 事件 。 内 容 看 上 去 比较 
简单 , 但 使 用 起 来 却 是 很 复杂 的 。 要 想 更 好 地 应 用 这 些 事件 , 必须 要 同时 学 会 使 用 JavaScript 
脚本 语言 。 下 一 章 将 讲解 编码 的 语法 规范 和 文档 类 型 声明 。 


16.11 本 章 习题 


【习题 16-1】 制 作 一 个 触发 事件 ， 当 单 击 “ 红 色 ” 时 ， 下 面 文字 变 成 红色 ， 并 缩小 字 
体 ， 当 用 户 单 击 “ 蓝 色 ” 时 ， 下 面 文字 变 成 蓝 色 ， 并 放大 字体 ， 效 果 如 图 16.39 所 示 。 

【习题 16-2】 为 网 页 添加 一 个 事件 ， 当 图 片 无 法 加 载 时 ， 告 知 浏览 者 图 片 无 法 找到 ， 
效果 如 图 16.40 所 示 。 


Ls 
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后 言 G 在 fileW/F/bj/f 级 /下 窜 入 
红色 槛 色 
i 


加 1631heml 
全 宇 C 在 JOneWFH 名 3 交 入 
红色 昔 色 

B 


这 是 鼠标 触发 事件 


鼠标 单 击 “ 红 色 ” 鼠标 单 击 “ 蓝 色 ” 
16.39 ”鼠标 触发 事件 


【习题 16-3 】 为 网 页 添加 滚动 字幕 ， 当 字幕 开始 滚动 时 ， 提 示 浏 览 者 ， 效 果 如 图 16.41 
所 示 。 


[Rovian - ox 


文件 (月 ” 编 强 (E) ”可 看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 


图 16.40 ”页面 事件 效果 图 图 16.41 滚动 字幕 事件 效果 图 


【习题 16-4】 为 网 页 添加 剪 切 事 件 ， 当 浏览 者 剪 切 文本 时 ， 弹 出 对 话 框 ， 提 示 浏 览 者 ， 
效果 如 图 16.42 所 示 。 


图 16.42 剪 切 事件 效果 图 


"2 


第 17 章 语法 规范 和 文档 类 型 声明 


俗话 说 无 规矩 不 成 方圆 规范 在 日 常生 活 中 是 很 重要 的 。 同样 的 , 在 编写 网 页 代码 时 ， 
同样 也 有 要 遵循 的 规范 ， 也 就 是 语法 规范 。 遵 循 语法 规范 是 非常 的 重要 的 ， 它 可 以 使 网 站 
更 具有 扩展 性 ， 也 更 方便 编辑 。 在 编写 代码 的 时 候 ， 一 直 提 倡 要 写 符 合 Web 标准 的 规范 代 
码 。XHTML 的 语法 是 目前 来 说 最 符合 Web 标准 的 语法 。 文 档 类 型 声明 的 标准 主要 是 遵从 
XHTML 网 页 的 规范 的 。 本 章 将 详细 讲解 网 页 的 语法 规范 和 文档 类 型 声明 。 


17.1 语法 规范 


语法 规范 是 指 在 编写 代码 时 要 遵循 的 书写 规范 。 规 范 的 书写 代码 可 以 使 网 站 更 容易 被 
浏览 器 读 取 和 被 搜索 器 搜索 到 ， 从 而 提高 网 站 的 浏览 量 。 本 节 将 详细 讲述 语法 规范 中 需要 
注意 的 三 个 问题。 


17.1.1 属性 名 称 必须 小 写 


读者 也 许 会 发 现 ， 在 网 页 中 ， 无 论 代码 属性 名 称 是 大 写 还 是 小 写 ， 都 可 以 在 浏览 器 中 
正常 显示 。 但 是 在 Web 标准 中 ， 使 用 大 写 来 写 属性 的 名 称 是 不 符合 规范 的 。 在 Web 标准 
里 ， 规 定 属性 的 名 称 必 须 是 小 写 的 。 但 由 于 现在 的 浏览 器 还 未 做 到 完全 符合 Web 标准 ， 所 
以 才 可 以 正常 显示 大 写 的 属性 名 称 。 

【示例 17.1】 下 面 是 使 用 小 写 属性 名 称 的 页 面 的 显示 效果 。 这 里 将 给 出 错误 的 代码 和 
正确 的 代码 来 作为 比较 。 虽 然 都 能 够 显示 出 来 ， 但 为 了 以 后 网 站 的 扩展 性 ， 还 是 建议 养 成 
小 写 的 习惯 。 代 码 如 下 : 


<body > 
<table WIDTH="450PX" BORDERCOLOR="#00FFFF" BORDER="1"> 
<Er> 
<td>WIDTH="200PX" BORDERCOLOR="#00FFFF" BORDER="1"<br/><br/> 
上 面 是 错误 的 书写 规范 1</td> 
/Er 
</table> 
<br/> 
<table width="450px" bordercolor="#FF0000" border="1"> 
<tr> 
<td>width="450px" bordercolor="#FF0000" border="1"<br/><br/> 上 面 是 正 
确 的 书写 规范 !</td> 
</tr> 
</table> 
</body> 
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效果 如 图 17.1 所 示 。 


昌 5ehaa7 = 


人 访 C 在 加 fileVWFVbj/ 示 侧 / 第 17 襄 /17.Lhtml 


WIDTH="200PX” BORDERCOLOR="#00FFFF” BORDER=”1” 


上 面 是 错误 的 书写 规范 ! 


[width="450px” bordercolor="zFF0000” border="1” 


上 面 是 正确 的 书写 规范 ! 


图 17.1 使 用 小 写 属性 名 称 的 页 面 显 示 效果 图 


全 注意 : 在 把 属性 名 称 写成 小 写 的 同时 ， 记 得 把 单位 符号 也 写成 小 写 。 


17.1.2 属性 值 必须 加 引号 


在 代码 中 的 属性 值 虽然 不 加 引号 也 可 以 被 读 取出 来 ， 但 这 是 不 符合 Web 标准 的 。 在 
Web 标准 中 规定 ， 代 码 中 的 属性 值 必须 加 引号 。 不 加 引号 对 网 站 以 后 的 扩展 造成 很 大 的 
影响 。 

【示例 17.2】 下 面 是 使 用 引号 属性 值 的 页 面具 体 显示 效果 。 这 里 将 给 出 错误 的 代码 和 
正确 的 代码 来 作 比 较 。 代 码 如 下 : 

<body > 

<table width=350px bordercolor=#00FFFF border=1> 

EE 
<td>width=200px bordercolor=#00FFFF border=1<br/><br/> 这 是 错误 的 书写 规 
范 !</td> 

</tr> 

</table> 

<br/> 

<table width="350px" bordercolor="#FF0000" border="1"> 

CE 
<td>width="300px"” bordercolor="#FF0000" border="1"<br/><br/> 这 是 正确 的 
书写 规范 !</td> 
</tr> 
</table> 
</body> 


效果 如 图 17.2 所 示 。 


JSGs5ensy x 
| 全 了 Cf | 加 fley//F/bj/ 示 例 / 复 17 富 /17.2.html 


width=200px bordercolor=#00FFFF border=1 
这 是 错误 的 书写 规范 ! 


17.1.3 ”属性 不 能 简写 


width=”300px” bordercolor=“#FF0000” 
lborder="1” 


这 是 正确 的 书写 规范 ! 


在 Web 标准 中 规定 属性 不 能 简写 , 必须 把 属性 
和 属性 值 全 部 写 上 。 在 浏览 器 上 虽然 可 以 正常 地 显 
示 出 简写 的 属性 ， 但 这 不 符合 要 求 越 来 越 高 、 越 来 
越 规范 化 的 Web 标准 , 也 会 给 以 后 网 页 的 扩展 和 编 图 17.2 使 用 引号 属性 值 的 页 面 显示 效果 图 


。264 。 
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辑 造 成 很 大 的 影响 。 
【示例 17.3】 下 面 是 使 用 没有 简写 的 属性 的 页 面具 体 显示 效果 。 这 里 将 给 出 错误 的 代 
码 和 正确 的 代码 来 作为 比较 。 代 码 如 下 : 


<body > 

这 是 错误 的 书写 规范 : 属性 简写 <br /><br/> 

<input checked> <!- 插 入 输入 框 六 
<input readonly> <!- 插 入 输入 框 > 
<input disabled> <!-- 插 入 输入 框 人 


<br /><br/> 

这 是 正确 的 书写 规范 :属性 没有 简写 <br /><br/> 

<input checked=”checked” /> <!-- 插入 输入 框 --> 
<input readonly="readonly" /> <!-- 插入 输入 框 --> 
<input disabled="disabled" /> <!-- 插入 输入 框 --> 
</body> 


效果 如 图 17.3 所 示 。 
(=. 
示 16.37 Me 
C 在 加 filey//F:/bj/ 示 例 第 17 间 /17.3.html 。 窑 愉 
这 是 错误 的 书写 规范 :属性 简写 


这 是 正确 的 书写 规范 :属性 没有 简写 


图 17.3 使 用 没有 简写 的 属性 的 页 面 显示 效果 图 


这 里 将 给 出 HTML 中 可 以 简写 的 属性 的 列表 ， 以 及 在 XHTML 中 规范 的 写法 ， 如 
表 17.1 所 示 。 


表 17.1 简写 属性 在 HTML 和 XHTML 中 的 写法 


HIML XHTML 
compact compact="compact" 
checked checked="checked" 
declare declare="declare" 
readonly readonly="readonly" 
disabled disabled="disabled" 
selected selected="selected" 
defer defer="defer" 
ismap ismap="ismap" 
nohref nohref="nohref" 
noshade noshade="noshade" 
nowrap nowrap="nowrap" 
multiple multiple="multiple" 
noresize noresize="noresize" 


. 
已 
人 
内 
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全 注意 : 在 HTML 中 ， 这 些 简写 的 属性 是 可 以 使 用 的 ， 但 是 从 现在 开始 就 必须 养 成 不 用 
简写 的 习惯 ， 写 出 符合 Web 标准 的 网 页 代码 。 


17.2 设置 id 属性 


HTML 针对 某 些 元 素 定 义 了 name 属性 .虽然 使 用 name 属性 在 浏览 器 上 也 可 以 正常 显 
示 , 但 是 在 XHTML 中 建议 使 用 id 属性 来 代替 name 属性 。 在 Web 标准 中 规定 ， 必 须 使 用 
id 属性 。 所 以 在 以 后 的 代码 编写 中 ， 应 该 尽量 地 避免 name 属性 的 使 用 ， 而 用 id 属性 来 进 
行 代替 。 

【示例 17.4】 下 面 是 使 用 id 属性 的 页 面具 体 显示 效果 。 这 里 将 给 出 错误 的 代码 和 正确 
的 代码 来 作为 比较 。 代 码 如 下 : 


<body > 人 二 

这 是 错误 的 代码 :使 用 name 属性 <br /> 区 ET 
<input type="text" name="txt1" /> | 3 C foie/74hm 从 入 
<input type="text" name="txt2"/> 这 是 错误 的 代码 :使 用 name 属 性 

<br/><br /> 

这 是 正确 的 代 码 :使 用 id 属性 <br /> 这 是 正确 的 代码 :使 用 id 属性 


<input type="text" id="txt1" /> 
<input type="text" id="txt2" /> 
</body> 


效果 如 图 17.4 所 示 。 图 17.4 使 用 id 属性 的 页 面具 体 效果 图 


全 注意 : 在 没有 闭合 标签 的 标签 后 面 ， 记 得 要 加 “/” 号 来 使 标签 闭合 ， 而 且 在 “/” 号 前 
记得 加 上 额外 的 空格 ， 这 样 可 以 使 多 浏览 器 都 兼容 于 这 个 标签 。 


17.3 语言 属性 (lang) 


语言 属性 lang 是 用 来 定义 元 素 的 内 容 及 其 他 文本 属性 的 语言 种 类 。lang 几乎 可 以 应 用 
于 所 有 的 XHTML 元 素 。 在 使 用 lang 的 同时 ， 要 额外 加 上 xml:lang， 才 可 以 正式 生效 。 一 
般 简 体 中 文 为 zh-CN; 繁体 中 文 为 zh-HK; 英文 为 en-us。 其 语法 结构 如 下 : 

< 开始 标签 lang="n" xml :lang="n"> </ 闭 合 标签 > 

其 中 ，lang 中 的 n 和 xml:lang 中 的 n 填写 的 是 一 样 的 ， 都 是 用 来 填写 内 容 所 要 设置 的 


语言 


【示例 17.5】 下 面 是 使 用 语言 属性 lang 来 显示 页 面 内 容 语 言 的 具体 效果 。 代 码 如 下 : 


<body > 

<table border="1"> 

<tr width="300px"> 

<td lang="zh-CN"” xml:lang="zh-CN"> 这 是 简体 中 文 这 是 简体 中 文 这 是 简体 中 文 </td> 
<!-- 设置 语言 属性 为 简体 中 文 --> 


tr> 
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<td lang="zh-HK" xml:lang="zh-HK"> 这 是 繁体 中 文 这 是 繁体 中 文 这 是 繁体 中 文 </td> 
<!-- 设置 语言 属性 为 繁体 中 文 --> 


EE 
xt 
<td lang="en-us" xml:lang="en-us">This is EnglishThis is EnglishThis is 
English</td> <!-- 设置 语言 属性 为 英文 --> 
SHAEL> 
</table> 
</body> 
效果 如 图 17.5 所 示 。 

(= = 一 | 

全 了 C 组 file:///F:/bj/ 示 例 /第 17 章 /17.5.html 安 外 


这 是 简体 中 文 这 是 简体 中 文 这 是 简体 中 文 
人 这 是 星体 中 文 这 是 演 体 中 文 这 是 繁体 中 文 
This is EnglishThis is EnglishThis is English| 


图 17.5 使 用 语言 属性 lang 显示 页 面 内 容 语言 效果 图 


17.4 文档 类 型 DOCTYPE 


DOCTYPE 是 Document Type〈 文 档 类 型 ) 的 简写 ， 在 页 面 中 用 来 指定 页 面 所 使 用 的 
HTML (或 者 XHTML) 版 本 。 要 想 制作 符合 标准 的 页 面 ， 一 个 必 不 可 少 的 关键 组 成 就 是 
DOCTYPE 声明 。 在 XHTML 中 ， 必 须 对 每 个 页 面 强制 使 用 文件 类 型 声明 。 

文件 类 型 声明 放 在 页 面 的 最 上 面 ， 超 过 了 <head> 标 签 。 由 于 文件 类 型 声明 需要 加 上 使 
用 语言 的 代码 才 可 以 使 用 ， 所 以 本 节 将 不 做 举例 说 明 ， 只 给 出 简单 的 结构 ， 如 下 所 示 : 

<1DOCTYPE 使 用 语言 声明 > 

<html> 

<head> 

<title></title> 

</head> 

<body> 

</body> 

</html> 


17.5 DTD 声明 


DTD 声明 是 指 文档 类 型 定义 声明 ， 它 通常 放 在 页 面 的 头 部 、 所 有 标签 的 最 上 面 。 只 有 
确定 了 一 个 正确 的 文档 类 型 ，HTML 和 XHTML 里 的 标识 和 CSS 才能 正常 生效 。DTD 声 
明 有 三 种 不 同 的 声明 程度 ， 下 面 将 详细 介绍 这 三 种 声明 。 
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17.5.1 严格 DTD 


严格 DTD, 不 允许 使 用 任何 表现 层 的 标识 和 属性 , 包含 没有 被 反对 使 用 的 元 素 和 属性 ， 
或 者 是 不 出 现在 框架 结构 中 的 元 素 和 属性 ， 如 <font> 等 。 严 格 DTD 是 验证 程度 上 最 高 的 ， 
使 用 严格 DTD 的 网 站 必须 写 好 谨慎 的 代码 ， 使 得 网 站 一 点 不 符合 规范 的 代码 都 没有 ， 才 
可 以 通过 验证 。 其 语法 结构 如 下 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3 

.Org/TR/xhtml1/DTD/xhtml1l-strict.dtd"> 

其 中 ， 这 段 代 码 是 放 在 页 面 代码 的 最 上 面 的 ， 超 越 了 所 有 的 页 面 代码 。 这 段 代 码 是 固 
定 写法 ， 只 需要 把 一 整 段 放 在 页 面 上 ， 无 需 做 任何 改动 。 

【示例 17.6】 下 面 是 使 用 严格 DTD 来 显示 页 面 的 具体 效果 。 代 码 如 下 : 

<IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3. 

org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- 使 用 严格 DTD 声明 --> 

<htm1l xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 示 例 17.6</title> 


</head> 
<body> 
严格 DTD， 不 允许 使 用 任何 表现 层 的 标识 和 属性 ， 包 含 没有 被 反对 使 用 的 元 素 和 属性 ， 或 者 是 不 出 
现在 框架 结构 中 的 元 素 和 属性 ， 如 <font> 等 。 
</body> 
</html> 


效果 如 图 17.6 所 示 。 
且说 明 :; 上 面 所 说 的 “表现 层 的 标识 、 属 性 ”是 指 那 


些 纯粹 用 来 控制 表现 的 tag 标签 ， 例 如 用 于 
排版 的 表格 、 背景 颜色 标识 等 一 些 内 部 样式 。 


a ee 
J @ ms x 
言 C 在 @fileV//FVbj/ 示 例 /第 17 间 /17 全 入 


严格 DTD， 不 允许 使 用 任何 表现 层 的 标识 和 属 
性 ， 包 含 没有 被 反对 使 用 的 元 素 和 属性 ， 或 
eh 如 
<font> 等 。 


图 17.6 ”使 用 严格 DTD 显示 页 面 效果 图 
17.5.2 ”过渡 DTD 


过 渡 DTD 是 一 种 要 求 不 是 很 严格 的 DID， 包 含 严格 DTD 中 包含 的 一 切 ， 允 许 使 用 
HTML 4.01 的 标识 。 这 就 使 得 过 渡 DID 在 验证 程度 上 要 比 严格 DTD 低 一 级 。 其 语法 结构 
如 下 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 

WWW.w3.0org/TR/xhtmll1/DTD/xhtmll-transitional.dtd"> 

其 中 ， 这 段 代码 是 放 在 页 面 代 码 的 最 上 面 的 ， 超 越 了 所 有 的 页 面 代 码 。 这 段 代 码 是 固 
定 写法 ， 只 需要 把 一 整 段 放 在 页 面 上 ， 无 需 做 任何 改动 。 过 渡 DTD 和 严格 DTD 区 别 只 在 
于 最 后 面 的 文件 名 不 同 ， 其 他 用 法 都 是 一 样 的 。 

【示例 17.7】 下 面 是 使 用 过 渡 DTD 来 显示 页 面 的 具体 效果 。 代 码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
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w3 .org/TR/xhtml11/DTD/xhtml1-transitional.dtd"><!-- 使 用 过 渡 DTD 声明 --> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 17.7</title> 

</head> 

<body> 

过 渡 DTD 是 一 种 要 求 不 是 很 严格 的 DTD， 包 含 严格 DTD 中 包含 的 一 切 ， 还 外 加 了 那些 不 赞成 使 用 
的 元 素 和 属性 。 这 就 使 得 过 渡 DTD 在 验证 程度 上 要 比 严格 DTD 低 一 级 。 

</body> 

</html> 


效果 如 图 17.7 所 示 。 


全 注意 : 一 般 情况 下 ，Dreamweaver 自动 生成 的 是 过 
渡 DTD 验证 ， 因 为 它 使 用 起 来 比较 普遍 。 


Y O977 x 
和 六 CG 全 O filey//F/bj/ 示 例 /第 17 章 /17.7 窑 | 以 
过 渡 DTD 是 一 种 要 求 不 是 很 严格 的 DTD， 包 含 
严格 DTD 中 包含 的 一 切 ， 还 外 加 了 那些 不 鞠 成 
使 用 的 元 素 和 属性 。 这 就 使 得 过 渡 DTD 在 验证 
程度 上 要 比 严格 DTD 低 一 级 。 


17.5.3 框架 DTD 


框架 DTD 是 针对 框架 页 面 所 使 用 的 DTD， 当 页 图 17.7 使 用 过 渡 DTD 显示 页 面 效果 图 
面 中 含有 框架 元 素 时 ， 就 要 采用 这 种 DTD。 它 包含 了 过 渡 DTD 中 包含 的 一 切 ， 还 外 加 了 
框架 。 这 就 使 框架 DTD 比 过 渡 DTD 还 要 再 低 一 级 。 其 语法 结构 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3 
.Org/TR/xhtml1/DTD/xhtmll-frameset.dtd"> 


其 中 ， 这 段 代 码 也 和 严格 DID 一 样 ， 是 固定 写法 ， 两 者 的 区 别 只 在 于 最 后 面 的 文件 
名 不 同 ， 其 他 用 法 都 是 一 样 的 。 
【示例 17.8】 下 面 是 使 用 框架 DTD 来 显示 页 面 的 具体 效果 。 代 码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3. 
org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <!-- 使 用 框架 DTD 验证 --> 
<html xmlns="http://www.w3.0org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 17.8</title> 

</head> 

<body> 

<frameset > <! 一 定义 框架 --> 

框架 DTD 是 针对 框架 页 面 所 使 用 的 DTD， 当 页 面 中 含有 框架 元 素 时 ， 就 要 采用 这 种 DTD。 它 包含 了 
过 渡 DTD 中 包含 的 一 切 ， 还 外 加 了 框架 。 这 就 使 框架 DTD 比 过 渡 DTD 还 要 再 低 一 级 。 


</frameset> a i 
</body> 外 级 | 加 fleyWFYbj/ 示 全 第 17 间 /175 窑 | 只 
</html> 框架 DTD 是 针对 杠 架 页 面 所 使 用 的 DID， 当 页 
Et 
效果 如 图 17.8 所 示 。 加 这 就 使 框架 0TD 比 过 渡 DTD 还 要 再 低 一 
全 注意 ; 在 网 页 中 最 好 对 页 面 都 添加 上 DTD 验证 ， 
这 样 有 助 于 网 站 代码 的 规范 使 用 。 图 17.8 ”使 用 框架 DTD 显示 页 面 效果 图 
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17.6 使 用 W3C 验证 器 


W3C 是 World Wide Web Consortium 的 简写 ， 是 一 个 网 上 验证 器 。 它 提供 的 验证 服务 
可 以 为 互联 网 用 户 检查 HTML 文件 是 否 附 合 HTML 或 XHTML 标准 。 这 可 以 向 网 页 设计 
师 提供 快速 检查 网 页 错误 的 方法 ， 并 且 在 需要 的 时 候 可 以 做 一 些 自动 更 正 。 通 过 W3C 网 
站 来 进行 验证 ， 只 有 已 经 放 在 网 上 的 网 站 才 可 以 进行 验证 ， 因 为 它 是 通过 网 址 来 进行 测试 
的 。W3C 验证 器 的 测试 网 址 是 http://validator.w3.org/， 使 用 步骤 如 下 : 

(1) 登录 http://validator.w3.org/， 进 去 之 后 ， 在 相应 的 位 置 填 上 所 要 验证 的 网 站 网 址 ， 
如 图 17.9 所 示 。 


Eunl 通 M 文 作 上 六 通过 下 芝 输入 


各 证 指定 URI 的 CSS 具 容 
入 网 CSS09HTU 文生 四 C55 六 机 UR 


The WaC vadators rey on commumiy suopor ior hosting and development 
Donate and hop us buld better ioolks for a botior woh 


社区 如 果 你 昌 验 证 一 段 准 人 在 HTML 有 XHTML 文 村 中 的 CSS。 你 首先 更 这 证 你 的 HTML 或 省 XHTML 芭 忆 是 正确 的 . 


图 17.9 W3C 验证 器 页 面 效 果 图 1 


(2) 填写 完毕 后 , 按 下 Check 按钮 就 可 以 查 到 所 要 验证 网 站 的 验证 效果 了 。 如 图 17.10 
所 示 ， 在 这 里 可 以 看 到 网 站 所 包含 的 所 有 错误 。 


[CT 


查看 : 铺 训 (90) 者 告 (97) 已 经 档 办 的 导入 样式 夫 


httpywww.sohu.com (CSS 版 本 3) 


[加 "AONO/E0 %EY"/ butLef 
URT : hl mww shy comvupioadysyeislie121029 cs 
25 smainNav fravList .nav ul 语法 异 误 :margin top 2pX 


6 语法 嵌 误 [2px] snainNav snavList nav1 
LJ 

27 #manNav #navList nay1 fontArial 语法 异 诈 ;"margin:-1px 5px 0 5pX 

27 #mainNay snavList nay1 fontArial 语法 棋 误 十 

28 mainNav inavList nav2 dl 语 注 涝 误 "ine-height20px; 


0% 


图 17.10 W3C 验证 器 页 面 效果 图 2 
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这 是 显示 网 站 整体 错误 的 效果 图 ， 在 底下 还 会 有 每 个 错误 的 具体 描述 ， 由 于 描述 的 错 
误 过 多 ， 这 里 就 不 再 做 图 解 。 这 样 的 验证 器 起 到 很 好 的 作用 ， 方 便 了 设计 师 们 对 代码 的 修 
正 ， 也 方便 了 用 户 了 解 网 站 的 代码 规范 。 


17.7 本 章 小 结 


本 章 主要 学 习 了 网 页 中 的 语法 规范 和 文档 类 型 的 声明 ， 详 细 讲 解 了 语法 规范 中 需要 注 
意 的 问题 。 通 过 学 习 ， 可 以 了 解 到 规范 的 语法 才能 让 一 个 网 站 更 加 的 出 色 ， 有 更 好 的 扩展 
性 。 文 档 类 型 声明 也 是 网 页 中 的 重要 组 成 部 分 ， 读 者 一 定 要 认真 学 习 。 下 一 章 我 们 将 讲解 
XHTML 模块 化 和 结构 化 。 


17.8 本 章 习题 


【习题 17-1】 编 写 代 码 时 要 遵循 的 书写 规范 有 哪 几 种 ? 
【习题 17-2】 文 档 类 型 定义 声明 有 哪 几 种 ? 
【习题 17-3】 利 用 正确 的 语法 规范 编写 一 段 程序 ， 实 现 如 图 17.11 所 示 的 功能 。 


© 17-3.html x 


人 全 C 从 [ 加 file/W/FVbj/ 升 级 习 究 以 


格 宽 为 200px， 高 为 
100px， 背 景 颜色 为 蓝 色 


图 17.11 页 面 效果 图 
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XHTML 模块 化 ， 是 指 将 XHTML 分 为 若干 模块 ， 从 而 可 以 使 网 页 更 容易 编辑 、 修 改 
和 管理 。 XHTML 结构 化 是 以 结构 化 的 形式 来 设计 网 站 ， 使 网 站 可 以 按照 设计 师 自己 的 想 
法 来 设计 网 站 。 在 本 章 ， 将 详细 讲解 XHTML 模块 化 和 结构 化 。 


18.1 模块 化 的 原因 


XHTML 是 简单 而 庞大 的 语言 ， 包 含 了 网 站 开发 者 需要 的 大 多 数 功能 。 但 是 对 于 某 些 
特殊 的 用 途 XHTML 太 复 杂 ， 而 对 于 其 他 的 用 途 ， 它 又 太 简单 了 。 为 了 解决 这 个 问题 ， 将 
网 页 中 XHTML 分 成 若干 模块 来 使 有 用， 这些 模块 既 可 被 独立 应 用 于 简易 设备 ， 又 可 以 与 
其 他 XML 标准 并 入 大 型 且 更 复杂 的 应 用 程序 。 把 代码 模块 化 ， 可 以 使 页 面 更 容易 编辑 和 
管理 。 

使 用 XHMTL 模块 ， 必 须 把 XHTML 的 定义 分 类 。W3C 已 经 把 XHTML 的 定义 分 为 
28 种 模型 ， 如 表 18.1 所 示 。 


表 18.1 XHTML 定义 的 28 种 模型 表 


模 块 名 称 说 明 
Applet Module (Applet 模块 ) 定义 已 被 废弃 的 applet 元 素 
Base Module〈 基 础 模块 ) 定义 基本 元 素 


Basic Forms Module (基础 表单 模块 ) 
Basic Tables Module (基础 表格 模块 


定义 基本 的 表单 元 素 (forms) 
定义 基本 的 表格 元 素 (table) 


Bi-directional Text Module (双向 文本 模块 ) 
Client Image Map Module (客户 端 图 像 映 射 模 块 ) 


定义 bdo 元 素 
定义 浏览 器 端 图 像 映射 元 素 (image map elements) 


Edit Module (编辑 模块 ) 


定义 编辑 元 素 删除 和 插入 


Forms Module (表单 模块 ) 定义 所 有 在 表单 中 使 用 的 元 素 
Frames Module 〈 框 架 模块 ) 定义 frameset 元 素 
Hypertext Module 〈 超 文本 模块 ) 定义 a 元 素 


Ifame Module (内 联 框架 模块 ) 
Image Module (图 像 模块 ) 


定义 fame 元 素 
定义 图 像 元 素 (img) 


Intrinsic Events Module (事件 属性 模块 
Legacy Module (遗留 模块 ) 


定义 事件 属性 (event) ， 如 onblur 和 onchange 
定义 被 废弃 的 元 素 和 属性 


Link Module 〈 链 接 模块 ) 
List Module (列表 模块 ) 


定义 链接 (link) 元 素 
定义 列表 元 素 ol, li, ul, dd,， dt， 和 dl 


Metainformation Module (元 信息 模块 ) 
Name Identification Module (名 称 识别 模块 ) 


定义 meta 元 素 
定义 已 被 废弃 的 name 属性 
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模块 名 称 
Object Module (对 象 模块 ) 
Presentation Module (表现 模块 ) 
Scripting Module 〈 脚 本 模块 ) 
Server Image Map Module〈 服 务 器 端 图 像 映射 模块 ) 
Structure Module (结构 模块 ) 
Style Attribute Module (样式 属性 模块 ) 


说 明 
定义 对 象 元 素 (object) 和 param 元 素 
定义 表现 元 素 ， 如 b 和 i 
定义 脚本 (script) 和 无 脚本 (noscript) 元 素 
定义 服务 器 端 图 像 映射 〈server side image map) 元 素 
定义 以 下 元 素 : html，head，title and body 
定义 样式 属性 


Style Sheet Module (样式 表 模 块 ) 定义 样式 元 素 
Tables Module (表格 模块 ) 定义 用 于 表格 中 的 元 素 
Target Module (Target 模块 ) 定义 target 属性 


Text Module (文本 模块 ) 定义 文本 容器 元 素 (text container) ， 如 p 和 hl 


全 注意 : 已 被 废弃 的 元 素 不 应 被 用 于 XHTML 之 中 。 


18.2 XHTML 规则 概要 


XHTML 规则 是 将 传统 的 HTML 转换 为 XHTML。 这 种 转换 不 仅 快 捷 而 且 没 什么 影响 ， 
只 要 遵守 一 些 简单 的 规则 和 容易 的 方针 即 可 。 不 管 是 否 使 用 过 HIML， 都 不 会 妨碍 到 
XHTML 的 使 用 。 下 面 罗列 出 XHTML 规则 的 概要 : 
使 用 正确 的 文档 类 型 声明 和 命名 ; 
使 用 meta 标签 元 素 声明 页 面 内 容 类 型 ; 
使 用 小 写字 母 书写 所 有 的 标签 、 元 素 和 属性 ; 
应 当 为 所 有 的 属性 值 加 引号 ; 
应 当 为 所 有 的 属性 分 配 值 ; 
必须 关闭 所 有 的 标签 ; 
在 没有 闭合 标签 的 情况 下 ， 使 用 空格 和 和 斜 线 关 闭 空 标签 ; 
不 要 在 注释 中 写 双 下 划 线 ， 应 为 双 中 划 线 ; 
确保 写 好 “小 于 号 ”及 “和 号 ”为 “<” 和 “&”。 
其 实 ， 在 上 面 所 说 的 规则 中 ， 有 很 多 都 是 在 前 面 讲 过 的 。 这 就 要 求 写 好 HIML， 对 于 
升级 为 XHTML 是 有 很 大 的 帮助 的 。XHTML 规则 是 重 构 网 站 的 基础 。 


全 注意 : HTML 中 连续 的 多 个 空格 只 相当 于 一 个 空格 ， 需 要 连续 空格 时 使 用 &nbsp;。 


DDODOGQOO0O00g 


18.3 标记 文档 


标记 文档 ， 是 指 为 了 表达 语义 而 标记 的 页 面 代 码 。 结 构 良 好 的 文档 可 以 向 浏览 器 传达 
尽 可 能 多 的 语义 。 结 构 良 好 的 文档 都 能 向 用 户 传达 可 视 化 的 语义 ， 即 使 是 在 老 的 浏览 器 ， 


ms 
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或 是 在 被 用 户 关 闭 了 CSS 的 现代 浏览 器 中 。CSS 样式 作为 现在 设计 网 站 的 主流 样式 ,可 以 
使 样式 和 结构 化 文档 分 离开 来 .用 CSS 样式 来 为 特定 的 标签 添加 样式 , 使 标签 的 语义 存在 ， 
而 标签 本 身 的 样式 不 再 存在 ， 这 就 是 使 用 CSS 的 好 处 。 

所 以 在 使 用 上 ， 不 要 因为 想 用 标签 的 样式 而 去 使 用 标签 ， 而 是 想 用 标签 的 语义 去 使 用 
标签 ， 让 标签 只 起 到 标识 页 面 中 代码 语义 的 作用 。 这 里 将 举例 说 明 使 用 CSS 改变 标签 特定 
的 样式 ， 使 之 呈现 出 想 要 的 样式 。 

【示例 18.1】 下 面 是 使 用 CSS 改变 标签 特定 样式 的 具体 效果 。 这 里 将 使 用 内 部 样式 表 。 
代码 如 下 所 示 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3. 
org/TR/xhtml1/DTD/xhtmll-frameset .dtd"> 

<html xmlns="http://www.w3.0org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 18.1</title> 

<style type="text/css"> 


汉 至 

= 

#11 

四 
border:#00ffff 1lpx solid ; /* 设 置 边框 属性 */ 
width:200px; /* 设 置 宽度 */ 
font-size:18px; /* 设 置 字体 大 小 */ 
color:#996600; /* 设 置 字体 颜色 */ 

和 

{ 
border:#990000 1lpx solid; /* 设 置 边框 属性 */ 
width:200px; /* 设 置 宽度 */ 
font-size:18px; /* 设 置 字体 大 小 */ 
color:#30F; 

#13 

1 
letter-spacing:3px; /* 设 置 字体 间距 */ 
font-size:24px; /* 设 置 字体 大 小 */ 
text-decoration:underline; /* 设 置 字体 下 划 线 */ 
color:#3FC; /* 设 置 字体 颜色 */ 

. 

</style> 

</head> 

<body> 


<hl id="11"> 标 题 1</h1> 
<h2 id="12"> 标 题 2</h2> 
<h3 id="13"> 标 题 3</h3> 
运行 效果 如 图 18.1 所 示 。 
外 技巧 : 请 最 大 限度 地 使 用 CSS 来 对 网 页 进行 布局 ， 因 为 使 用 CSS 不 会 影响 到 标记 文档 。 
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图 18.1 使 用 CSS 改变 标签 特定 的 样式 效果 图 


18.4 误 用 CSS 


使 用 CSS 可 以 更 好 地 设置 网 页 的 样式 ， 也 会 使 网 站 更 易 用 、 更 轻便 ， 同 时 节约 了 部 分 
带宽 。 但 是 有 时 候 误 用 和 滥用 CSS 也 会 导致 时 间 和 带宽 的 浪费 。 所 以 在 制作 网 页 中 ， 要 注 
意 用 好 标签 和 样式 ， 一 定 不 要 误 用 和 滥用 CSS。 

【示例 18.2】 下 面 是 CSS 被 误 用 和 滥用 的 具体 效果 。 这 里 将 使 用 内 部 样式 表 。 代 码 如 
下 所 示 : 


<!DOCTYPE html]l PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3 
-Org/TR/xhtml1/DTD/xhtmll-frameset.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 18.2</title> 
<style type="text/css"> 
SU 
#a 
{ 

border:#00ffff 1px solid ; /* 设置 边框 属性 */ 

width:200px; /* 设置 宽度 */ 

font-size:25px; /* 设置 字体 大 小 */ 
, 
一 -> 
</style> 
</head> 
<body> 
<a id="a"> 超 链接 a 被 误 用 </a> 超 链 接 a 被 误 用 
</body> 
</html> 


运行 效果 如 图 18.2 所 示 。 


全 说 明 : 通过 图 18.2 可 以 看 出 ，<a> 标 签 原本 是 用 来 表示 
超 链接 的 作用 ， 现 在 却 被 用 来 表现 样式 ， 失 去 了 超 链接 本 来 的 语义 ， 这 就 是 被 误 
用 和 滥用 的 结果 。 
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图 18.2 CSS 被 误 用 和 混用 效果 图 


ee 
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18.5 正确 使 用 元 素 结构 化 


每 个 元 素 都 可 以 被 结构 化 ， 但 是 不 一 定 每 个 元 素 都 必须 结构 化 。CSS 可 使 得 一 个 有 序 
或 无 序 的 列表 显示 为 彻头彻尾 的 导航 栏 , 其 中 还 拥有 反 转 按钮 效果 。 其 列表 的 语义 还 存在 ， 
而 样式 却 完全 脱离 。 所 以 元 素 的 结构 化 要 根据 设计 师 的 需要 来 设置 ， 而 不 是 使 每 个 元 素 都 
结构 化 。 

【示例 18.3】 下 面 是 使 用 结构 化 的 无 序列 表 来 显示 页 面 的 具体 效果 。 这 里 将 使 用 内 部 
样式 表 。 代 码 如 下 所 示 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3 

.org/TR/xhtml1/DTD/xhtml1l-frameset.dtd"> 

<html xmlns="http://www.w3.0org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 


<title> 示 例 18.3</title> 
<style type="text/css"> 


5 

#1b1 
list-style-type:none; /* 设 置 列表 不 显示 自 带 图 案 */ 
font-size:14px; 
width:500px; /* 定 义 宽度 */ 

np 

1 
display:block; /* 定 义 列表 横向 排列 */ 
float:left; 
width:130px; 
height:30px; 
background:url (../images/13.35.jpg) no-repeat; /* 设 置 列表 图 案 */ 
padding-left:20px; /* 设 置 内 边 距 */ 
padding-top:2px; /* 设 置 内 边 距 */ 
margin-top:2px; /* 设 置 外 边 距 */ 
border-bottom:solid 1lpx #6FF; /* 设 置 边框 */ 

2 

</style> 

</head> 

<body> 


<ul id="1lb1"> 
<1i id="1b2"> 标 题 1</1i> 
<1i id="1b2"> 标 题 2</1i> 
<1i id="1b2"> 标 题 3</1i> 
<1i id="1b2"> 标 题 4</1i> 
<1i id="1b2"> 标 题 5</1i> 
<1i id="1b2"> 标 题 6</1i> 
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竞标 题 1 钊 标题 2 
香 标 题 4 韶 标 题 5 


图 18.3 ”使 用 结构 化 的 无 序列 表 显 示 页 面 效果 


外 说 明 : 从 图 18.3 中 可 以 看 出 ， 结 构 化 后 的 列表 已 经 完全 脱离 了 之 前 自 带 的 样式 ， 形 成 了 
一 个 排列 很 整齐 的 列表 。 列表 中 每 笑 三 条 信息 就 会 自动 换行 ， 是 使 用 宽度 进行 设 
置 的 。 当 显示 的 内 容 超 过 了 规定 的 宽度 时 ， 列 表 便 会 自动 跳 到 下 一 行 。 


18.6 正确 使 用 div、id 和 class 


div、id 是 制作 网 站 的 好 帮手 ， 如 果 被 正确 地 使 用 ，div 可 以 成 为 结构 化 标记 的 好 帮手 ， 
而 这 则 是 一 种 令 人 惊讶 的 小 工具 , 它 能 够 使 编写 的 XHTML 极其 紧凑 。 再 加 上 巧妙 地 利用 
CSS， 便 可 以 向 网 站 添加 复杂 而 又 精巧 的 行为 。 

div 是 英文 division 的 简写 ， 有 分 割 、 区 域 、 分 组 的 意思 。 在 制作 网 站 时 ， 使 用 div 来 
对 网 站 内 容 进行 划分 区 域 ， 是 一 个 很 好 的 做 法 。 比 如 ， 当 网 页 分 割 成 儿 部 分 时 ， 就 变 成 了 
儿 个 区 域 了 ， 对 这 几 个 分 割 出 来 的 区 域 用 div 进行 控制 ， 便 可 以 达到 很 好 的 控制 和 布局 。 
通常 在 使 用 中 ， 设 计 师 会 用 div 来 对 页 面 中 的 内 容 进行 样式 的 设置 和 布局 。 这 是 一 个 非常 
好 用 的 标签 。 

有 了 div， 当 然 就 少不了 id 和 class， 这 二 者 是 用 来 和 CSS 样式 绑 定 的 。 在 前 面 ， 也 对 
二 者 进行 过 解说 ， 在 id 和 class 之 间 的 使 用 ， 取 决 于 id 具有 唯一 性 ， 使 用 id 的 样式 ， 在 页 
面 里 只 可 以 出 现 一 次 ， 而 class 的 样式 ， 在 页 面 里 可 以 被 反复 使 用 。 这 二 者 在 CSS 中 ， 有 
着 标识 的 作用 。 但 在 使 用 中 ， 必 须 考 虑 好 要 用 哪 种 进行 标识 ， 不 然 就 会 变 成 之 前 所 说 的 误 
用 和 滥用 了 。 

【示例 18.4】 下 面 是 使 用 id 和 class 来 显示 页 面 的 具体 效果 。 这 里 将 使 用 内 部 样式 表 。 
代码 如 下 所 示 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" “http://www.w3 
.org/TR/xhtml1/DTD/xhtml1l-frameset.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 18.4</title> 

<style type="text/css"> 


a 
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width:300px; 

border:#00ffff lpx solid ; /* 设 置 边框 属性 */ 

Color:#FF0000; /* 设 置 字体 颜色 */ 

font-size:14px; 

letter-spacing:2px; /* 设 置 字符 间距 */ 

font-weight:bold; /* 设 置 粗 体 */ 
.Content1 

border:#000 lpx solid ; /* 设 置 边框 属性 */ 

font-size:12px; /* 设 置 字体 大 小 */ 

COloOr:4333 /* 设 置 字体 颜色 */ 

text-indent:20px; /* 设 置 首 行 缩 进 */ 


width:300px; 
height:100px; 

i 

</style> 

</head> 

<body> 

<div id="menul" > 

主页 | 相册 | 留言 版 

</div> 

<div class="content1"> 


div、iq 是 制作 网 站 的 好 帮手 。 如 果 被 正确 地 使 用 ，qdiv 可 以 成 为 结构 化 标记 的 好 帮手 ， 而 id 
则 是 一 种 令 人 惊讶 的 小 工具 ， 它 能 够 使 编写 的 XHTML 极其 紧凑 。 再 加 上 巧妙 地 利用 css, 便 可 以 向 


网 站 添加 复杂 而 又 精巧 的 行为 。 


</div> 
<div class="content1"> 


div 是 英文 division 的 简写 ， 有 分 割 、 区 域 、 分 组 的 意思 。 在 制作 网 站 时 ， 使 用 div 来 对 网 站 
内 容 进 行 划分 区 域 ， 是 一 个 很 好 的 做 法 。 比 如 ， 当 网 页 分 割 成 几 部 分 时 ， 就 变 成 了 几 个 区 域 了 ， 对 


这 几 个 分 割 出 来 的 区 域 用 div 进行 控制 ， 便 可 以 达到 很 好 的 控制 


</div> 
</body> 
</html> 


运行 效果 如 图 18.4 所 示 。 
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主页 | 相册 | 留言 版 
dv、id 是 制作 网 站 一 一 了 时 袜 正确 地 使 用 ， 
各 罗 二 和 化 生 记 的 他 关于， 而 id 则 是 一 种 令 人 惊 
讶 的 小 工具 ， 它 能 够 使 编写 的 XHT 了 UL 极其 紧凑 。 再 加 上 巧 
由 地 利用 CSS， 便 可 以 向 网 站 添加 复杂 而 又 精巧 的 行为 。 


ionl 
En 在 制作 | 让 时， 全 hv 风光 
， 的 做 法 。 比 如 ， 割 成 几 部 分 时 

变 成 了 几 个 区 域 了 ， 对 这 六 个 才 旭 休 区 区 二 生 3i 过 
控制 ， 便 可 以 达到 很 好 的 控制 


图 18.4 使 用 id 和 class 显示 页 面 效 果 图 
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外 说 明 : 从 图 18.4 中 可 以 看 出 ， 菜 单 是 页 面 唯一 的 部 分 ， 所 以 使 用 了 id 进行 标识 ， 而 内 
容 可 以 是 多 个 内 容 ， 所 以 使 用 了 class 进行 标识 。 


18.7 本 章 小 结 


本 章 主要 学 习 了 XHTML 模块 化 和 结构 化 ， 详 细 介绍 了 XHTML 模块 的 分 类 以 及 
XHTML 结构 化 的 正确 使 用 。 本 章 内 容 看 上 去 不 多 ， 但 却 是 很 重要 的 部 分 ， 在 网 站 设计 过 
程 中 都 要 注意 到 这 些 问 题 。 只 有 做 好 XHTML 的 模块 化 和 结构 化 ， 才 能 做 出 一 个 优秀 的 网 
站 。 下 一 章 开始 讲解 网 站 应 用 实例 。 


18.8 本 章 习 题 


【习题 18-1】 为 什么 要 进行 模块 化 ? 

【习题 18-2】XHTML 规则 概要 有 哪些 ? 

【习题 18-3 】 使 用 标记 文档 改变 标题 h2 的 样式 ， 实 现 如 图 18.5 所 示 的 效果 。 
ea 
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图 18.5 ”使 用 标记 文档 效果 图 
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吸收 知识 最 好 的 方法 就 是 通过 实例 来 将 知识 运用 起 来 。 将 我 们 前 面 所 学 的 所 有 知识 通 
过 实例 来 说 明 ， 让 知识 实战 化 ， 让 繁琐 的 知识 点 聚集 在 一 起 ， 做 出 有 趣 的 页 面 效 果 。 本 章 
就 将 结合 前 面 所 讲 知识 ， 通 过 制作 一 个 博客 的 雏形 ， 给 出 设计 博客 用 的 一 系列 代码 ， 来 让 
读者 更 容易 理解 所 学 的 知识 。 


19.1 制作 文本 内 容 


本 节 将 通过 不 同 的 实例 来 让 网 页 中 的 文本 内 容 显示 出 不 同 的 效果 。 将 用 两 种 方式 来 进 
行 说 明 ， 一 种 是 用 <table> 标 签 来 制作 的 文本 内 容 效果 ， 一 种 是 用 div+CSS 来 制作 的 文本 内 
容 效果 。 


19.1.1 <table> 制 作文 本 内 容 效 果 


本 小 节 的 实例 将 使 用 <table> 标 签 来 作为 大 的 框架 ， 再 利用 其 他 标签 属性 来 制作 出 文本 
内 容 效果 。 首 先 介绍 文本 内 容 的 设置 ， 再 介绍 超 链 接 的 设置 。 

【示例 19.1】 下 面 是 使 用 <table> 标 签 属性 制作 一 个 简单 博客 的 效果 。 代 码 如 下 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 

w3 .org/TR/xhtml11/DTD/xhtml1-transitional .dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 博 客 日 志 </title> 

</head> 

<body bgcolor="#FFFFCC"> <!-- 设 置 页 面 整体 背景 颜色 --> 

<table width="700" border="0" cellspacing="0" cellpadding="0" align= 

"center" background="images/19.1.jpg" > 


<!-- 设 置 表格 宽度 ， 让 表格 居中 ， 插 入 背景 图 --> 
EE 


<td width="1024"><img src="../images/19.1.1.jpg" width="350" height= 
"120" /><img src="../images/19.1.1.jpg" alt="1" width="350" height= 


"120" /></td> <!-- 插 入 图 片 --> 
</Er> 
二 工大 
<td> 
<table width="700px" border="1px" align="center" cellpadding="5px" 
cellspacing="0" bordercolor="#998559"> <!-- 嵌 套 表格 开始 --> 
xr> 


<td colspan="2" align="center" bgcolor="#CC9966" > 
<font size="16px" face=" 华 文 行 楷 ， 守 体 " width="700px"><strong> 
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我 的 日 志 </strong></font><!-- 定 义 文字 的 大 小 和 风格 ， 再 对 文字 进行 加 粗 --> 
</td> 
> 
和 > 
<td width="402" bgcolor="#CC9966"> 
<!-- 文 本 内 容 开 始 --> 


<h1> 吉 檀 迦 利 </h1> 
<blockquote><font face=" 华 文 新 魏 ， 宋 体 "> 泰戈尔 </font> 
</blockquote><br /> <!-- 定 义 文字 风格 ， 对 字体 进行 缩 进 --> 


你 已 经 使 我 永生 ， 这 样 做 是 你 的 快乐 。<br/> 
这 脆 薄 的 杯 儿 ， 你 不 断 地 把 它 倒 空 ， 又 不 断 地 以 新 生命 来 充满 。<br/> 


这 小 小 的 苇 笛 ， 你 携带 着 它 傅 山越 谷 ， 从 第 管 里 吹出 永 新 的 音乐 。<br/> 
在 你 双手 的 不 朽 的 按 抚 下 ， 我 的 小 小 的 心 ， 消 融 在 无 边 快 乐 之 中 ， 发 出 不 可 言说 的 词 调 。<br/> 


你 的 无 穷 的 赐予 只 倾 入 我 小 小 的 手 时 ,时代 过 去 了 ,你 还 在 倾注 , 而 我 的 手 里 还 有 余 量 待 充满 。<br/> 
<!-- 文 本 内 容 结束 --> 
</td> 


<td width="272" bgcolor="#F6EABA"> 
<! 一 嵌 套 表格 开始 --> <table border="2px" align="center" bordercolor= 
"#993300"> <!-- 设 置 表格 边框 ， 定 义 表格 居中 ， 添 加 表格 背景 颜色 --> 


<EF 


<td> 
<a href="images/19.1 2.jpg" target=" blank"><img 
src="../images/19.2.jpg" width="148" height="220" 
border="0" /></a> <!-- 定 义 图 片 链接 图 片 --> 
</td> 
</tr> 
</table> <!-- 殿 套 表格 结束 --> 
</td> 
</tr> 
</table> <!-- 恢 套 表格 结束 --> 
<br /> 
</td> 
二 由 
</table> 
</body> 
</html> 


效果 如 图 19.1 所 示 。 
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图 19.1 使 用 标签 属性 制作 一 个 简单 博客 效果 图 
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各 说 明 : 单 击 图 片 ， 可 以 打开 图 片 的 链接 。 


【示例 19.2】 下 面 是 使 用 标签 属性 制作 一 个 简单 图 库 的 具体 效果 。 由 于 头 部 代码 一 样 ， 
所 以 这 里 只 给 出 页 面 <body> 标 签 里 的 代码 。 代 码 如 下 : 

<body bgcolor="#FFFFCC"> <!-- 设 置 页 面 整体 背景 颜色 --> 

<table width="700"” border="0" cellspacing="0" cellpadding="0" align= 

"center" background="images/19.1.jpg" > 


<!-- 设 置 表格 宽度 ， 让 表格 居中 ， 插 入 背景 图 --> 


<EE> 
<td width="1001"><img src="../images/19.1.1.jpg" width="350"” height= 
"120" /><img src="../images/19.1.1.jpg" alt="1"” width="350" height= 
"120" /></td><!-- 插 入 图 片 --> 
SEE 
<td> 
<table width="700px" border="1lpx" align="center" cellpadding="5px" 
cellspacing="0" bordercolor="#998599"> <!-- 霸 套 表格 开始 --> 
< 
<td colspan="2" align="center" bgcolor="#cc9966"> 
<font size="16px” face=" 华 文 行 楷 , 宋 体 "><strong> 我 的 图 库 </strong> 
</font> <!-- 定 义 文字 的 大 小 和 风格 ， 再 对 文字 进行 加 粗 --> 
</td> 
</tr> 
<tr> 
<td width="211" bgcolor="#cc9966"> 
<!-- 文 本 内 容 开始 --> 
<a href="../images/19.3.jpg" target="pic"> 百 合 </a><br /><br 
/> <!-- 用 图 片 绑 定 浮动 框架 打开 链接 图 片 -~-> 
<a href="../images/19.4.jpg" target="picl"> 玫 瑰 </a><br /><br 
PE <! 一 用 图 片 绑 定 浮动 框架 打开 链接 图 片 --> 
<!-- 文 本 内 容 结束 --> 
</td> 


<td width="463" bgcolor="#cc9966"> 
<table width="458" align="center" bordercolor="#993300"> 
<! 一 - 霸 套 表格 开始 -> 
<tr> 
<td> 
<iframe src="19.2 1.html" name="pic" allowtrans 
parency="true" width="210" height="250 scrolling= 
"no"> 此 图 片 浏览 不 到 </iframe> <!-- 插 入 浮动 框架 --> 
<iframe src="19.2 2.html" name="picl" allowtrans 
parency="true" width="210" height="250 scrolling= 
"no"> 此 图 片 浏览 不 到 </iframe> <!-- 插 入 浮动 框架 --> 
</td> 
<HErS 
</table> <!-- 震 套 表格 结束 --> 
</td> 
AEE> 
</table> <!-- 嵌 套 表格 结束 --> 
<br /> 
</td> 
二 /ET 大 
</table> 
</body> 


效果 如 图 19.2 所 示 。 
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图 19.2 使 用 标签 属性 制作 一 个 简单 图 库 效果 图 


全 说 明 : 图 19.2 中 的 链接 分 别 显示 在 两 个 不 同 的 浮动 框架 里 面 。 


19.1.2 div+CSS 制作 文本 内 容 效果 


div+CSS 制作 文本 内 容 效果 是 指使 用 div 来 做 页 面 的 框架 布局 ， 再 利用 CSS 对 其 进行 
布局 样式 的 控制 。 这 里 也 和 上 一 小 节 一 样 ， 会 给 出 两 个 例子 ， 而 使 用 的 例子 会 和 上 一 小 节 
的 例子 显示 效果 大 致 上 相同 , 不 过 还 会 添加 多 个 不 同 的 效果 。 首先 先 介绍 文本 内 容 的 设置 ， 
然后 再 介绍 超 链接 的 设置 。 

【示例 19.3】 下 面 是 使 用 div+CSS 制作 一 个 简单 博客 的 具体 效果 。 示 例 使 用 的 是 外 部 
样式 表 , 放 在 css 文件 夹 里 , 命名 为 19.3.css。 这 里 将 分 别 给 出 CSS 文件 和 页 面 文件 的 代码 ， 
代码 如 下 。 

CSS 文件 代码 : 


@charset "utf-8"; 
/* CSS Document*/ 
*{ margin:0 auto padding:0; text-align:center;/* 去 除 整 体 页 面 的 边 距 */ 


body{ background:#998559;} /* 设 置 页 面 整体 背景 颜色 */ 
.mainframt{ 

width:700px; /* 设 置 宽度 */ 
.headfram{ 

height:120px; /* 设 置 高 度 */ 


background:url(../images/19.1.1.jpg) repeat; 
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.titlefram{ 


height:50px; 
width:700px; 


border:#998559 2px solid; /* 设 置 边 框 */ 
background-color:#cc9966; 
font-family: "华文 行 楷 "， "宋体 "; /* 设 置 字体 风格 */ 
font-size:40px; /* 设 置 字体 大 小 */ 
font-weight:bold; /* 设 置 粗 体 */ 
padding-top:15px; /* 设 置 内 上 边 距 #/ 
} 
.contentfram{ 
width:700px; 
border:#998559 2px solid; 
background-color:#cc9966; 
border-top:0px; /* 设 置 上 边框 为 零 */ 
clear:both; /* 设 置 清除 浮动 */ 
| 
; width:402px; 
fon-size:14px; 
padding:20px; /* 设 置 内 边 距 */ 
float:left; /* 设 置 左 浮动 */ 
text-align:left; /* 设 置 字体 靠 左 */ 
border-right:#998559 2px solid; 
line-height:24px; /* 设 置 行 高 #/ 
"ei 
float:right; /* 设 置 右 浮动 */ 
margin-right:50px; /* 设 置 外 右边 距 */ 


background:url(../images/19.2.1.jpg) no-repeat; 


width:148px; 

height:220px; 

border:#993300 2px solid; 

margin-top:20px; /* 设 置 外 上 边 距 */ 
} 
.Clearfram{clear:both;} /* 清 除 浮动 */ 


hl{ fon-size:34px; text-align:left;} 
h2{ text-align:left; padding:5px 50px; font-family: "华文 新 魏 "， "宋体";} 


CSS 中 ， 可 以 看 到 一 个 新 的 样式 属性 用 法 ， 就 是 清除 浮动 ， 清 除 浮动 是 针对 设置 了 浮 
动 的 框架 布局 用 的 。 
页 面 文件 代码 : 


<!DOCTYPE html PUBLIC "~-//W3C//DTD XHTML 1 .0 Transitional//EN"<!DOCTYPE html 
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o0org/TR/ 
xhtml1/DTD/xhtmll-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 博 客 日 志 </title> 
<link href="../css/19.3.css" rel="stylesheet" type="text/css" /> 
<!-- 调 用 外 部 样式 表 --> 
</head> 
<body> 
<div class="mainfram"> 


"B65 


第 19 章 博客 雏形 


<div class="headfram"></div> <!-- 调 用 头 部 内 容 --> 
<div class="titlefram"> 我 的 日 志 </div> <!-- 调 用 标题 内 容 --> 
<div class="contentfram"> 
<div class="leftfram"> <!-- 调 用 左边 内 容 --> 


<!-- 文 本 内 容 开 始 --> 
<h1> 吉 檀 迦 利 </h1> 
<blockquote><font face=" 华 文 新 魏 ， 宋 体 "> 一 一 一 泰戈尔 </font> 
</blockquote><br /> <!-- 定 义 文字 风格 ， 对 字体 进行 缩 进 --> 
你 已 经 使 我 永生 ， 这 样 做 是 你 的 快乐 。<br/> 
这 脆 薄 的 杯 儿 ， 你 不 断 地 把 它 倒 室 ， 又 不 断 地 以 新 生命 来 充满 。<br/> 


这 小 小 的 苇 笛 ， 你 携带 着 它 逾 山越 谷 ， 从 笛 管 里 吹出 永 新 的 音乐 。<br/> 
在 你 双手 的 不 朽 的 按 抚 下 ， 我 的 小 小 的 心 ， 消 融 在 无 边 快乐 之 中 ， 发 出 不 可 言说 的 词 调 。<br/> 


你 的 无 穷 的 赐予 只 倾 入 我 小 小 的 手 里 。 时 代 过 去 了 , 你 还 在 倾注 , 而 我 的 手 里 还 有 余 量 待 充满 。<br/> 
<!-- 文 本 内 容 结束 --> 
</div> 
<div class="rightfram"></div> <!-- 调 用 右边 内 容 --> 
<div class="clearfram"></div> <!-- 清 除 整体 浮动 --> 
</div> 
SR 
</div> 
</body> 
</html> 


效果 如 图 19.3 所 示 。 


了 Gear " 
© 3 C 在 加 file/WFVbj/ 示 例 /各 19 宣 /19.1html PE 
La mm F 


图 19.3 使 用 div+CSS 制作 一 个 简单 博客 效果 图 
外 注意 : 在 使 用 div+CSS 制作 网 站 时 ， 需 要 注意 用 到 清除 属性 ， 清 除 属性 主要 用 来 清除 之 
前 样式 留 下 的 浮动 , 使 大 的 框架 里 的 小 框架 不 会 因为 浮动 而 无 法 应 用 到 大 框架 的 
效果 。 很 多 时 候 框架 的 变形 就 是 浮动 所 造成 的 。 
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这 里 将 把 前 面 页 面 中 和 CSS 中 的 清除 浮动 部 分 删除 ， 


然 了 。 效 果 如 图 19.4 所 示 。 


给 出 效果 图 ， 这样 就 可 以 一 目 了 


| 


了 Oeas 
“ 3 C 在 © file///C/Users/yrtx2/Desktop/19.L.html 
a, 
a 
a 
吉 檀 迦 利 
于 总 尔 


你 已 经 使 我 永生 ， 这 样 做 是 你 的 快乐 。 
人 你 不 断 地 把 它 倒 空 ， 又 不 断 地 以 新 生命 来 


这 小 小 的 鞍 锯 ， 你 携带 天 它 全 山 越 谷 ， 从 管 管 里 吹出 永 新 
的 音乐 。 


在 你 双手 的 不 朽 的 按 抚 下 ， 国生 人 消融 在 无 边 快 
‖ 乐 之 中 ， 发 出 不 可 言说 的 词 

入 让 兴 全 模 于 内 六 和 我 小 小 的 手 里， 时 代 过 去 了 ， 你 还 
在 倾注 ， 而 我 的 手 里 还 有 余 量 待 充满 。 


图 19.4 在 图 19.3 基础 上 去 掉 浮 动 效 果 图 


【示例 19.4】 下 面 是 使 用 div+CSS 制作 一 个 简单 图 库 的 具体 效果 。 示 例 使 用 的 是 外 部 
样式 表 , 放 在 css 文件 夹 里 , 命名 为 19.4.css。 这 里 将 分 别 给 出 CSS 文件 和 页 面 文件 的 代码 ， 


代码 如 下 。 
CSS 文件 代码 : 


@charset "utf-8"; 
/* CSS Document*/ 


*{ margin:0 auto; padding:0; text-align:center;} 


body{ background:#998559;} 
.mainframt{ 
width:700px; 


.headfram{ 
height:120px; 
background:url(. 

, 

.titlefram{ 
height:50px; 
width:700px; 
border:#998559 2px solid; 
background-color:#cc9966; 
font-family:" 华 文 行 楷 "，" 宋 体 "; 
font-size:40px; 
font-weight:bold; 
padding-top:15px; 

} 


.contentfram{ 


-Rs 


/* 去 除 整体 页 面 的 边 距 */ 
/* 设 置 页 面 整体 背景 颜色 */ 


/* 设 置 宽 度 */ 


/* 设 置 高 度 */ 


./images/19.1.1.jpg) repeat; 


/* 设 置 边框 #/ 


/* 设 置 字体 风格 */ 
/* 设 置 字体 大 小 */ 
/* 设 置 粗 体 */ 

/* 设 置 内 上 边 距 */ 
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width:700px; 
border:#998559 2px solid; 
background-color:#cc9966; 


border-top:0px; /* 设 置 上 边框 为 零 #/ 
clear:both; /* 设 置 清除 浮动 */ 
} 
-leftfram{ 
width:200px; 
height:350px; 
padding:20px; /* 设 置 内 边 距 */ 
float:left; /* 设 置 左 浮动 */ 
text-align:left; /* 设 置 字体 靠 左 */ 
border-right:#998559 2px solid; 
y 
.rightfram{ 
width:463; 
height:210; 
float:right; /* 设 置 右 浮动 */ 
margin-right:50px; /* 设 置 外 右边 距 */ 
margin-top:20px; /* 设 置 外 上 边 距 */ 
Th 
.Clearfram{clear:both;} /* 清 除 浮动 */ 


af font-size:16px; text-decoration:none; color:#660000;}/* 设 置 超 链接 */ 
a:hover{ font-size:18px; text-decoration:underline; color:#0000CC;} 


/* 设 置 超 链接 鼠标 经 过 样式 */ 


在 CSS 中， 可 以 看 到 ， 大 部 分 的 代码 和 示例 19.3 的 代码 是 一 样 的 ， 只 是 多 了 超 链接 
的 代码 和 改变 了 原来 样式 的 一 些 设置 。 

页 面 文件 代码 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 

W3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.0org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 博 客 日 志 </title> 

<link href="../css/19.4.css" rel="stylesheet" type="text/css" /> 


<!-- 调 用 外 部 样式 表 --> 


</head> 
<body> 
<div class="mainfram"> 
<div class="headfram"></div> <!-- 调 用 头 部 内 容 --> 
<div clas itlefram"> 我 的 图 库 </div> <!-- 调 用 标题 内 容 --> 
<div class="contentfram"> 
<div class="leftfram"> 
<p> <!-- 调 用 左边 内 容 --> 


<!-- 文 本 内 容 开 始 --> 
<a href="../images/19.3.jpg" target="pic"> 百 合 </a><br /><br /> 
<!-- 用 图 片 绑 定 浮动 框架 打开 链接 图 片 --> 
<a href=". ./images/19.4.jpg" target="picl"> 玫 瑰 </a><br /><br 
/> <!-- 用 图 片 绑 定 浮动 框架 打开 链接 图 片 --> 


<!-- 文 本 内 容 结束 --> 
</div> 
<iframe src="19.2 1.html" name="pic" allowtransparency="true" width= 
"210" height="250 scrolling="no"> 此 图 片 浏览 不 到 </iframe> 


ss 


第 3 篇 ”网 站 开发 实例 


<! 一 -插入 浮动 框架 --> 
<iframe src="19.2 2.html" name="picl" allowtransparency="true" 
width="210"” height="250 scrolling="no"> 此 图 片 浏览 不 到 </iframe> 
<! 一 -插入 浮动 框架 --> 


<div class="rightfram"> <!-- 插 入 浮动 框架 --> 
</div> <!-- 调 用 右边 内 容 --> 
<div class="clearfram"></div> <!-- 清 除 整体 浮动 --> 
</div> 
<br /> 
</div> 
</body> 
</html> 


效果 如 图 19.5 所 示 。 


Omas = 
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图 19.5 使 用 div+CSS 制作 一 个 简单 图 库 效果 图 


外 说 明 : 在 示例 中 ， 浮 动 框 架 和 超 链接 的 绑 定 是 不 能 用 样式 来 完成 的 ， 所 以 还 是 使 用 了 之 
前 讲 过 的 标签 属性 来 进行 设置 。 


19.2 制作 列表 


在 前 面 我 们 已 经 讲 过 ， 无 论 是 使 用 有 序列 表 还 是 无 序列 表 都 可 以 制作 出 整洁 有 序 的 新 
闻 列 表 。 本 节 将 会 通过 有 序列 表 和 无 序列 表 来 做 出 整洁 有 序 的 日 志 列 表 ， 还 会 通过 使 用 自 
定义 列表 来 做 出 网 站 地 图 功能 。 
19.2.1 制作 有 序 日 志 列 表 


制作 有 序 日 志 列 表 ， 是 用 有 序列 表 来 进行 制作 的 。 这 里 将 会 使 用 列表 +CSS 来 进行 制 
作 。 本 小 节 会 给 出 两 个 例子 ， 展 示 两 种 不 同 的 效果 。 先 展示 纵向 日 志 列 表 ， 再 来 展示 横向 


-Ns 


志 列 表 。 


【示例 19.5】 下 面 是 使 用 有 序列 表 制 作 纵向 日 志 的 具体 效果 。 示 例 使 用 的 是 外 部 样式 
表 ， 放 在 css 文件 夹 里 , 命名 为 19.5.css。 这 里 将 分 别 给 出 CSS 文件 和 页 面 文件 的 代码 ， 代 


人 码 如 下 。 
CSS 文件 代码 : 


charset "utf= 6" 
/*CSS Document*/ 


*{margin:0; padding:0;} /* 设 置 整 体 边 距 为 零 #/ 
.listfram 
{ 
border:solid lpx #0FF; /* 设 置 边框 */ 
width:140px; 
height:200px; 
margin:10px; /* 设 置 外 边 距 */ 
{ 
list-style-type:none; /* 设 置 列表 不 显示 自 带 图 案 */ 
padding:15px; /* 设 置 内 边 距 */ 
1 
height:30px; 
width:100px; 
font-size:14px; /* 设 置 字体 大 小 */ 
padding-left:10px; /* 设 置 内 边 距 */ 
padding-top:2px; /* 设 置 内 边 距 */ 
margin-top:2px; /* 设 置 外 边 距 */ 
border-bottom:dotted lpx #996600; /* 设 置 边框 */ 
background:url (../images/19.6.jpg) no-repeat; /* 设 置 背 景 图 */ 
ea 
。 height:25px; 
color:#F00; /* 设 置 字体 颜色 */ 
padding-top: 5px; /* 设 置 内 边 距 */ 
background-color:#3FF; /* 设 置 背景 颜色 */ 
text-align:center; /* 设 置 字体 居中 */ 


下 


可 以 看 到 ，CSS 里 很 多 样式 都 是 之 前 讲 过 的 ， 这 里 只 是 帮 它 们 拼凑 在 一 起 。 


页 面 文件 代码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
Ww3.0rg/TR/xhtml1/DTD/xhtml1l-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 


<head> 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 


<title> 示 例 19.5</title> 


<link href="../css/19.6.css" rel="stylesheet" type="text/css" /> 


<!-- 调 用 外 部 样式 表 --> 
</head> 
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<body> 
<div class="listfram"> 
<div id="titlefram"> 最 新 日 志 </div> 
<ol > 
<1i> 日 志 1</1i> 
<1i> 日 志 2</1i> 
<1i> 日 志 3</1i> 
<1i> 日 志 4</1i> 
</ol> 
</div> 
</body> 
</html> 


效果 如 图 19.6 所 示 。 


全 说 阴 : 这 是 列表 非常 典型 的 使 用 方法 ， 使 用 列表 要 记得 在 页 面 上 设置 整体 的 边 距 都 为 
零 ， 不 然 就 会 导致 列表 向 右 移 动 了 一 大 截 ， 而 导致 整体 的 结构 变形 。 


下 面 是 在 示例 19.5 的 CSS 文件 中 去 除 整 体 边 距 设置 的 效果 图 ， 效 果 如 图 19.7 所 示 。 
[ee | 
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图 19.6 使 用 有 序列 表 制 作 纵 向 日 志 效 果 图 图 19.7 将 图 19.6 去掉 整体 边 距 设置 效果 图 
全 注意 : 在 CSS 中 , 每 一 个 样式 属性 都 要 其 特定 的 意义 ,使 用 都 需要 慎重 ， 不 然 就 会 照 成 
变形 或 者 是 多 浏览 器 显示 不 同 的 结果 。 


【示例 19.6】 下 面 是 使 用 有 序列 表 制 作 横向 日 志 的 效果 。 示 例 使 用 的 是 外 部 样式 表 ， 
放 在 css 文件 夹 里 ， 命 名 为 19.6.css。 这 里 将 分 别 给 出 CSS 文件 和 页 面 文件 的 代码 ， 代 码 
如 下 。 

CSS 文件 代码 : 


@charset "utf-8"; 
/*CSS Document*/ 


*{margin:0; padding:0;} /* 设 置 整 体 边 距 为 零 */ 
.listfram 
border:solid 1px #00ffff; /* 设 置 边框 */ 


width:500px; 
margin:10px; 


"2 


/* 通 过 对 整体 宽度 的 设置 来 规定 页 面 一 行 要 显示 几 个 日 志 */ 


/* 设 置 外 边 距 */ 
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list-style-type:none; 


/* 设 置 列表 不 显示 自 带 图 案 */ 


padding:10px; /* 设 置 内 边 距 */ 

- 

4 
display:block; /* 定 义 列表 横向 排列 */ 
float:left; 
height:20px; 
width:100px; 
font-size:14px; /* 设 置 字体 大 小 */ 
padding-left:20px; /* 设 置 内 边 距 */ 
padding-top:2px; /* 设 置 内 边 距 */ 
margin-top:2px; /* 设 置 外 边 距 */ 
border-bottom:dotted 1lpx #996600; /* 设 置 边框 */ 
background:url(../images/19.6.jpg) no-repeat; /* 设 置 背 景 图 */ 

i 

' height:25px; 
Color:#FFFFFF; /* 设 置 字体 颜色 */ 
padding-top: 5px; /* 设 置 内 边 距 */ 
background-color:#33ffff; /* 设 置 背 景 颜 色 */ 
text-align:center; /* 设 置 字体 居中 */ 


} 
.Clearfram{clear:both; height:10px;} /* 清 除 浮动 */ 

因为 纵向 列表 和 横向 列表 只 是 差 了 儿 个 属性 的 设置 所 以 可 以 看 到 , 示例 19.6 的 CSS 
文件 和 19.5 的 CSS 文件 大 臻 上 是 一 样 的 ， 而 页 面 的 代码 只 是 加 多 了 一 句 清除 浮动 便 可 。 
清除 浮动 的 作用 在 前 面 已 经 讲述 过 ， 这 里 就 不 再 做 说 明 。 

页 面 文件 代码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www 
.W3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
<html xmlns="http://www.w3.0org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 19.6</title> 
<link href="../css/19.6.css" rel="stylesheet" type="text/css" /> 
<!-- 调 用 外 部 样式 表 --> 
</head> 
<body> 
<div class="listfram"> 
<div id="titlefram"> 最 新 日 志 </div> 
<ol> 
<1i> 日 志 1</1i> 
<1i> 日 志 2</1i> 
<1i> 日 志 3</1i> 
<1i> 日 志 4</1i> 
</ol1> 
<div class="clearfram"></div> 
</div> 
</body> 
</html> 


<!-- 清 除 浮动 --> 


us 
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效果 如 图 19.8 所 示 。 


后 了 CG 帮 昌 file:///F/bj/ 示 例 /第 19 童 /19.6.html 


LES BOX EEX Be 


图 19.8 ”使 用 有 序列 表 制 作 横向 日 志 效 果 图 


19.2.2 制作 无 序 日 志 列表 


在 用 CSS 制作 中 , 无 序 日 志 列表 和 有 序 日 志 列表 的 制作 过 程 是 一 样 的 ， 这 里 就 不 再 并 
述 。 本 小 节 将 用 标签 属性 来 制作 无 序 日 志 列表 。 由 于 使 用 标签 属性 无 法 做 出 横向 列表 ， 所 
以 这 里 只 用 一 个 例子 来 讲述 无 序列 表 。 

【示例 19.7】 下 面 是 使 用 无 序列 表 制 作 纵向 日 志 的 具体 效果 。 代 码 如 下 : 

<body> 


<table border="1" cellpadding="0" cellspacing="0" width="150px" height= 


"150px"> <!-- 插 入 表格 --> 
RE 
<td bgcolor="#3ff" align="center" height="30px"> 

<font color="#ffff00" > 最 新 日 志 </font> ”<!-- 定 义 字 体 颜 色 --> 
</td> 
</tr> 
RE 
Ea 
<ul type="circle" > <!-- 插 入 列表 --> 
<1i> 日 志 1</1i> 
<1i> 日 志 2</1i> 
<1i3> 日 志 3</1i> 
<1i3 日 志 4</1i> 
</ul> 
</td> 
REE> 
</table> 
</body> 


效果 如 图 19.9 所 示 。 


外 说 明 : 使 用 标签 属性 ， 只 能 制作 出 这 样 简单 的 列 
表 ， 而 没有 办 法 再 进行 修饰 得 像 CSS 那 
样 的 样式 。 所 以 在 标签 属性 中 ， 很 少 会 使 
用 到 列表 , 设计 师 都 是 用 表格 来 代替 列表 
的 使 用 的 。 


图 19.9 使 用 无 序列 表 制 作 纵向 日 志 效 果 图 
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19.2.3 制作 自 定 义 网 站 地 图 
自 定义 列表 用 得 最 多 、 最 经 典 的 是 制作 网 站 地 图 。 虽 然 使 用 有 序列 表 或 无 序列 表 进 行 


CSS 设置 和 嵌 套 ， 也 可 以 做 到 自 定 义 列 表 的 效果 ， 但 是 在 浏览 器 的 使 有 


多 问题 。 本 小 节 ; 
【示例 19.8】 


将 使 用 列表 +CSS 来 举例 说 明 自 定义 网 站 地 图 的 制作 。 


j 


如 下 。 


CSS 文件 代码 : 


@charset " 


EE 


/*CSS Document*/ 


.framl 
四 


border 


:lpx solid #966; 


width:200px; 
height:250px; 


4 
.titlefram 


{ 


color: 
font-s 


#666; 
ize:24px; 


width:200px; 


border:1lpx solid #966; 
} 
dt 
{ 
background:url(../images/19.7.jpg) no-repeat; 
font-size:14px; 
padding-left:20px; 
height:25px; 
dt#one 
{ 
background:url(../images/19.8.jpg) no-repeat; 
} 
dd 
{ 
background:url(../images/19.9.jpg) no-repeat; 
padding-left:20px; 
font-size:12px; 
height:20px; 
- 
页 面 文件 代码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 


Www.w3.0org/TR/xhtmll1/DTD/xhtmll-transitional.dtd"> 


<html xmln 
<head> 


s="http://www.w3.o0rg/1999/xhtml"> 


下 面 是 使 用 列表 +CSS 来 显示 网 站 地 图 的 效果 。 示例 使 
放 在 css 文件 夹 里 ， 命 名 为 19.8.css。 这 里 将 分 别 给 出 CSS 文件 和 页 面 文件 的 代码 ， 代 码 


上 


/* 设 置 边框 颜色 */ 
/* 设 置 边 框 宽度 */ 
/* 设 置 边 框 高 度 */ 


/* 设 置 字体 颜色 */ 
/* 设 置 字体 大 小 */ 


/* 设 置 背景 图 */ 
/* 设 置 字体 大 小 */ 
/* 设 置 内 边 距 */ 


/* 设 置 背 景 图 */ 


/* 设 置 背 景 图 */ 
/* 设 置 内 边 距 */ 
/* 设 置 字体 大 小 */ 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 19.8</title> 


中 ， 往 往 会 出 现 很 


的 是 外 部 样式 表 ， 
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<link href="../css/19.8.css" rel="stylesheet" type="text/css" /> 
<!-- 调 用 外 部 样式 表 --> 

</head> 

<body bgcolor=""> 

<div class="framl"> 

<div class="titlefram"> 网 站 地 图 </div> 

<dl> ”<!-- 插 入 列表 --> 


<dt> 关 于 我 们 </dt> 
<dt id="one"> 博 客 介绍 </dt> i 
<dd> 介 绍 1</dd> [> eaJGaemwrex A 
<dd> 介 绍 2</dd> | 后 5 图 
<dd> 介 绍 3</dd> 网 站 地 图 
<dt> 留 言 版 </dt> gd 
<dt> 联 系 我 们 </dt> We 

</dl> 3 ie 

</div> > 介绍 s 

| 只 留言 版 
效果 如 图 19.10 所 示 。 联系 我 们 
全 说 明 : 可 以 看 到 ,博客 介绍 里 分 了 三 个 下 级 分 


类 。 下 级 分 类 全 部 都 缩 进 显示 ,这 就 是 图 19.10 使 用 列表 +CSS 显示 网 站 地 图 效果 图 
自 定义 列表 的 特色 。 


通过 表单 +CSS 就 可 以 做 出 好 看 的 留言 版 。 这 里 将 会 使 用 两 者 结合 来 制作 一 个 表单 ， 
不 过 纯粹 是 一 个 留言 版 的 表单 效果 ， 还 不 能 提交 任何 的 数据 。 

【示例 19.9】 下 面 是 使 用 表单 +CSS 来 显示 留言 版 的 具体 效果 。 示 例 使 用 的 是 外 部 样式 
表 ， 放 在 css 文件 夹 里 ， 命 名 为 19.9.css。 这 里 将 分 别 给 出 CSS 文件 和 页 面 文件 的 代码 ， 代 
码 如 下 。 

CSS 文件 代码 : 


Q@charset "utf-8"; 
/*CSS Document*/ 


.titlefram 

{ 
font-size:32px; /* 设 置 字体 大 小 */ 
color:#999; /* 设 置 字体 颜色 */ 
padding-—left:30px; /* 设 置 内 边 距 */ 
border-bottom:3px ridge #999999; /* 设 置 边框 */ 
height:40px; 

3 

ul 

{ 
list-style-type:none; /* 设 置 列表 不 显示 自 带 图 案 */ 

. 

1i 

于 
margin-bottom:10px; /* 设 置 外 边 距 */ 
font-size:14px; /* 设 置 字体 大 小 */ 
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- 

input, textarea 

| 
border:1px solid #0FF; /* 设 置 边框 */ 
background:#fff; /* 设 置 背 景 颜色 */ 


} 

input, textarea 

{ 
star : expression (onmouseover=function() {this.style.backgroundColor= 
"#D7E3FF"}, 


/* 设 置 鼠 标 经 过 时 的 颜色 */ 

onmouseout=function(){ 
this.style.backgroundColor="#fff" /* 设 置 鼠标 经 过 后 的 颜色 */ 
i 

Vy 

.in80 {width:80px;} 

.in120 {width:120px;} 

.in250 {width:250px;} 

.submitfram 

J 
border:0; /* 设 置 边框 */ 
margin-top:10px; /* 设 置 外 边 距 */ 


在 CSS 中 ,不仅 可 以 设置 输入 框 的 边框 颜色 ,还 可 以 设置 输入 框 的 大 小 、 输 入 框 里 字 
体 的 颜色 及 大 小 等 等 。 而 这 里 只 设置 背景 颜色 和 边框 颜色 。 通 过 CSS 里 的 设置 , 可 以 使 鼠 
标 经 过 输入 框 时 改变 输入 框 的 背景 颜色 。 

页 面 文件 代码 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 

WWW.W3.0rg/TR/xhtml1l/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.o0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 示 例 19.9</title> 


<link href="../css/19.9.css" rel="stylesheet" type="text/css" /> 
<!-- 调 用 外 部 样式 表 --> 


</head> 
<body> 
<div class="titlefram"> 留 言 版 </div> 
<form method="post" action=""> 
<ul> 
<1i> 您 的 姓名 : <input class="in80" type="text" /></1i> 
<! 一 设置 输入 框 --> 
<1i> 联 系 电话 : <input class="in120" type="text" /></1i> 
<!-- 设 置 输入 框 --> 
<1i> 联 系 地 址 : <input class="in250" type="text" /></1i> 
<!-- 设 置 输入 框 --> 


<1i><textarea name="textarea" id="textarea" cols="45" rows="5"> 请 


输入 留言 内 容 </textarea></1i> <!-- 设 置 输入 文本 域 --> 

< 
<input class="submitfram" width="60px" height="22px" type= 
"image" name="imageField" id="imageField" src="../images/19.10 
-jpg" /> <! 一 -设置 提交 按钮 --> 
&nbsp; 


<input class="submitfram" width="60px" height="21px" type= 


et 
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"image" name="imageField" id="imageField" src="../images/19.11 


Se <! 一 -设置 重 置 按钮 --> 
Ei 
</ul> 
</form> 
</body> 
</html> 
效果 如 图 19.11 所 示 。 
| © sme9 四 民 bh 
全 六 C 人 络 | filey//F/bj/ 示 例 第 19 意 /19.9.html 
= 
留言 版 
您 的 姓名 
联系 电话 
联系 地 址 
| 请 输入 留言 内 究 
ny 


图 19.11 使 用 表单 +CSS 显示 留言 版 效果 图 


外 说 明 : 当 和 鼠标 移 到 输入 框 时 ， 输 入 框 就 会 变 成 绿色 ， 如 图 19.11 所 示 。 


19.4 ”制作 图 片 展示 


图 片 展示 是 在 网 站 中 展示 与 网 站 有 关 的 一 些 图 片 ， 经 常 被 用 来 展示 网 站 产品 。 本 节 将 
通过 两 种 方法 来 展示 图 片 页 面 的 效果 。 一 种 是 用 table 制作 图 片 展 示 ， 一 种 是 用 div+CSS 
制作 图 片 展示 。 


19.4.1 table 制作 图 片 展示 


table 制作 图 片 展示 效果 ， 是 指 以 table 来 做 布局 ， 青 使 用 翌 套 table 来 做 出 图 片 展 示 效 
果 。 这 里 会 给 出 两 种 使 用 table 制作 图 片 展示 的 方法 , 一 种 是 用 标签 属性 来 制作 图 片 展示 效 
果 ， 一 种 是 用 table+CSS 来 制作 图 片 展示 效果 。 

【示例 19.10】 下 面 是 使 用 标签 属性 制作 图 片 展示 的 效果 。 由 于 示例 是 用 标签 属性 来 进 
行 制作 ， 代 码 只 出 现在 <body> 标 签 里 ， 所 以 这 里 只 给 出 <body> 标 签 里 的 代码 。 代 码 如 下 : 

<table border="0" cellspacing="5" cellpadding="0" align="center" valign=" 


middle"> ”<!-- 表 格 居中 对 齐 --> 


<Er> 
<th colspan="3"> 鲜 花 图 片 展示 </th> 
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</tr> 
<tr> 
<td> 


<table border="1" cellspacing="0" cellpadding="0"> 
<!-- 开 始 插入 嵌 套 表格 --> 


<EE> 
<td><img src="../images/19.12 1.jpg" width="100px" height= 
"100px"/></td> <!-- 揪 入 图 片 --> 

/AEE> 

< 
<td height="21"” align="center"> 红 色 康 乃 志 </td> 

tr> 

</table> <!-- 结 束 插入 顽 套 表格 --> 
</td> 


<td> 
<table border="1" 


cellspacing="0" cellpadding="0"> 
<!-- 开 始 插入 顽 套 表格 --> 


订 坟 四 
<td><img src="../images/19.12 2.jpg" width="100px" height= 
"100px" /></td> <!-- 插 入 图 片 --> 

</Er> 

<EE> 
<td align="center"> 向 日 葵 </td> 

</tr> 

</table> <!-- 结 束 插 入 堪 套 表格 --> 
</td> 
KEG> 

<table border="1" 


cellspacing="0" cellpadding="0"> 
<!-- 开 始 插入 嵌 套 表格 --> 


<Etr> 
<td><img src="../images/19.12 3.jpg" width="100px" height= 
"O00px" /></td> <!-- 插 入 图 片 --> 
</EFE> 
<tE> 
<td align="center"> 粉 玫瑰 </td> 
</Er> 
</table> <!-- 结 束 插入 嵌 套 表格 --> 
</td> 
</tr> 
<tr> 
<td> 


<table border="1" cellspacing="0" cellpadding="0" 
<!-- 开 始 插入 嵌 套 表格 --> 
六 臣下 之 


<td><img src="../images/19.12 4.jpg" width="100px" height= 


"100px"/></td> <!-- 择 入 图 片 --> 
</tr> 
<tr> 


<td align="center"> 白 玫瑰 </td> 
</tr> 


</table> <! 一 -结束 插入 炭 套 表格 --> 
</td> 


<ta> 
<table border="1" cellspacing="0" cellpadding="0"> 
<!-- 开 始 插入 媒 套 表格 --> 
< 


<td><img src="../images/19.12 5.jpg" width="100px" height= 
"100px"/></td> <!-- 插 入 图 片 --> 
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REE> 
“E> 
<td align="center"> 康 乃 志 </td> 
/FE> 
</table> <!- -结束 插入 芍 套 表格 --> 
</td> 
<td> 
<table border="1"” cellspacing="0" cellpadding="0"> 
<!-- 开 始 插入 嵌 套 表格 --> 


A 
<td><img src="../images/19.12 6.jpg" width="100px" height= 
"100pzx"/></td> <!-- 插 入 图 片 --> 
< Er 
tr> 
<td align="center"> 黄 色 康 乃 志 </td> 
</tr> 
</table> <!-- 结 束 插入 嵌 套 表格 --> 
</td> 
</Er> 
<Er> 
<td> 


<table border="1" 


cellspacing="0" cellpadding="0"> 
<!-- 开 始 插入 恬 套 表格 --> 
< 
<td><img src="../images/19.12 7.jpg" width="100px" height= 
"100px"/></td> <!-- 插 入 图 片 --> 
</tr> 
<tr> 
<td align="center"> 白 色 康 乃 志 </td> 
</tr> 
</table> <!-- 结 束 插入 工 套 表格 --> 
</td> 
<td> 
<table border="1" 


cellspacing="0" cellpadding="0"> 
<!-- 开 始 插入 嵌 套 表格 --> 
<tr> 
<td><img src="../images/19.12 8.jpg" width="100px" height= 
"100px"/></td> <!-- 插 入 图 片 --> 
</tr> 
<Er> 
<td align="center"> 粉 玫瑰 </td> 
</ER> 
</table> <!-- 结 束 插入 人 嵌 套 表格 --> 
</td> 
<td> 
<table border="]1" cellspacing="0" cellpadding="0"> 


<!-- 开 始 插入 购 套 表格 --> 
<tr> 


<td><img src="../images/19.12 9.jpg" width="100px" height= 
"100px"/></td> <!-- 插 入 图 片 --> 
</tr> 
<tr> 
<td align="center"> 粉 红 康 乃 遍 </td> 
x/EE> 
</table> <! 一 -结束 插入 岩 套 表格 -> 
</td> 
/十 二 > 
</table> 
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效果 如 图 19.12 所 示 。 


名 说 明 ; 使 用 表格 来 进行 图 片 展示 ， 需要 用 到 很 = 一 玫 时 = 
多 的 代码 ， 把 原本 很 简单 的 效果 编写 成 了 
复杂 的 代码 。 在 下 面 的 示例 中 将 会 介绍 简 
单 的 图 片 展示 的 效果 . 


【示例 19.11】 下 面 是 使 用 table+CSS 来 制作 图 
片 展示 的 具体 效果 。 示 例 使 用 的 是 外 部 样式 表 ， 
放 在 css 文件 夹 里 , 命名 为 19.11.css。 这 里 将 分 别 
给 出 CSS 文件 和 页 面 文件 的 代码 ， 代 码 如 下 。 
CSS 文件 代码 : 


@charset "utf-8"; 
/*CSS Document*/ 
table, td 


| width:375px; 图 19.12 ”使 用 标签 属性 制作 图 片 展示 效果 图 


font-size:32px; /* 设 置 字体 大 小 */ 
" 
.imgfram 
border:2px #996666 solid; /* 设 置 边 框 */ 
width:100px; 
height:120px; 
margin:10px; /* 设 置 外 边 距 */ 
text-align:center; /* 设 置 居中 显示 */ 
float:left; /* 设 置 浮动 */ 
1 


页 面 文件 代码 : 


<body> 
<table width="399" border="0" align="center" cellpadding="0" cellspacing= 
"Oo" > <!-- 表 格 居中 对 齐 --> 
ETF> 
<th width="399"> 鲜 花 图 片 展示 </th> 
</tr> 
的 ED 之 
<td> 
<div class="imgfram"><img src="../images/19.12 1.jpg" width="100px" 
height="100px"/><br /> 
红色 康 乃 志 </div> <!-- 插 入 图 片 --> 
<div class="imgfram"><img src="../images/19.12 2.jpg" width="100px" 
height="100px"/><br /> 
向 日 葵 </div> <!-- 插 入 图 片 --> 
<div class="imgfram"><img src="../images/19.12 3.jpg" width="100px" 
height="100px"/><br /> 
粉 玫瑰 </div> <!-- 插 入 图 片 -=-> 
<div class="imgfram"><img src="../images/19.12 4.jpg" width="100px" 
height="100px"/><br /> 
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白 玫瑰 </div> <!-- 插 入 图 片 --> 


<div class="imgfram"><img src="../images/19.12 5.jpg" width="100px" 


height="100px"/><br /> 
康 乃 世 </div> <!-- 插 入 图 片 --> 


<div class="imgfram"><img src="../images/19.12 6.jpg" width="100px" 


height="100px"/><br /> 
黄色 康 乃 志 </div> <!-- 插 入 图 片 --> 


<div class="imgfram"><img src="../images/19.12 7.jpg" width="100px" 


height="100px"/><br /> 


白色 康乃馨 </div> <!-- 插 入 图 片 --> 


<div class="imgfram"><img src="../images/19.12 8.jpg" width="100px" 


height="100px"/><br /> 
粉 玫 瑰 </div> <!-- 插 入 图 片 --> 


<div class="imgfram"><img src="../images/19.12 9.jpg" width="100px" 


height="100px"/><br /> 


粉红 康 乃 验 </div> <!1-- 插 入 图 片 --> 


</td> 
</Er> 

</table> 
</body> 


效果 如 图 19.13 所 示 。 
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ME y 
C 看  fley///F/bj/ 示 例 /篇 19 意 /19.11html 女 信 


鲜花 图 片 展示 


红色 康 乃 黄 


Lb 
粉 玫瑰 粉红 康 乃 贞 


图 19.13 使 用 tablerCSS 制作 图 片 展示 效果 图 


全 说 明 :示例 19.11 使 用 tabletCSS 只 需要 很 少 的 代码 便 可 以 做 出 和 示例 19.10 一 样 的 效果 ， 
而 且 示 例 19.11 还 可 以 通过 宽度 的 调整 来 轻松 设置 一 行 放置 多 少 个 图 片 。 


19.4.2 div+CSS 制作 图 片 展示 效果 


div+CSS 制作 图 片 展示 效果 是 指 用 div+CSS 制作 出 来 的 图 片 展示 效果 。 这 种 做 法 会 和 


示例 19.11 有 些 相 似 ， 但 要 比 示例 19.11 更 加 的 整洁 、 实 用 。 


【示例 19.12】 下 面 是 使 用 div+CSS 来 制作 图 片 展示 的 效果 。 示例 使 


“2 


的 是 外 部 样式 表 ， 
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放 在 css 文件 夹 里 ， 命 名 为 19.12.css。 这 里 将 分 别 给 出 CSS 文件 和 页 面 文件 的 代码 ， 代 码 
如 下 。 
CSS 文件 代码 : 


@charset "utf-8"; 
/*CSS Document*/ 


-mainfram 

攻 
width:375px; 
height:480px; 

3 

.titlefram 

{ 
font-weight:bold; /* 设 置 粗 体 */ 
font-size:32px; /* 设 置 字体 大 小 */ 
text-align:center; /* 设 置 字体 居中 显示 */ 

¥ 

.imgfram 

{ 
border:2px #996666 solid; /* 设 置 边 框 */ 
width:1oopx; 
height:120px; 
margin:10px; /* 设 置 外 边 距 */ 
text-align:center; /* 设 置 居 中 显示 */ 
float:left; /* 设 置 浮动 */ 


页 面 文 件 代码 : 


<body> 
<div class="mainfram" align="center" valign="middle"> 
<div class="titlefram"> 鲜 花 图 片 展 示 </div> 
<div class="imgfram"><img src="../images/19.12 1.jpg" width="100px" 
height="100px" /><br /> 红色 康 乃 验 </div> <!-- 插 入 图 片 --> 
<div class="imgfram"><img src="../images/19.12 2.jpg" width="100px" 


height="100px"/><br /> 向 日 葵 </div> <!-- 插 入 图 片 --> 
<div class="imgfram"><img src="../images/19.12 3.jpg" width="100px" 
height="100px"/><br /> 粉 玫瑰 </div> <!-- 插 入 图 片 --> 
<div class="imgfram"><img src="../images/19.12 4.jpg" width="100px" 
height="100px"/><br /> 白 玫 瑰 </div> <!-- 插 入 图 片 --> 
<div class="imgfram"><img src="../images/19.12 5.jpg" width="100px" 
height="100px"/><br /> 康 乃 志 </div> <!-- 插 入 图 片 --> 


<div class="imgfram"><img src="../images/19.12 6.jpg" width="100px" 
height="100px"/><br /> 黄色 康乃馨 </div> ”<!-- 插 入 图 片 --> 
<div class="imgfram"><img src="../images/19.12 7.jpg" width="100px" 
height="100px"/><br /> 白色 康 乃 志 </div> ”<!-- 插 入 图 片 --> 
<div class="imgfram"><img src="../images/19.12 8.jpg" width="100px" 
height="100px"/><br /> 粉 玫瑰 </div> <! 一 -插入 图 片 --> 
<div class="imgfram"><img src="../images/19.12 9.jpg" width="100px" 
height="100px"/><br /> 粉色 康 乃 志 </div> ”<!-- 插 入 图 片 --> 

</div> 

</body> 


效果 如 图 19.14 所 示 。 
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加 ae 
当 C 在 file:///F:/bj/ 示 例 / 惫 19 章 /19.12.html 


EI 


图 19.14 使 用 div+CSS 制作 图 片 展示 效果 图 


名 说明: div+CSS 做 出 来 的 图 片 展示 效果 和 table+CSS 做 出 来 的 图 片 展示 效果 一 样 ， 但 是 
div+CSS 所 用 代码 要 比 table+CSS 更 简单 一 些 。 


19.5 制作 图 片 滚动 


图 片 滚动 和 前 面 所 讲 的 字幕 滚动 作用 一 样 ， 是 在 网 站 应 用 中 很 常见 的 一 种 图 片 显示 效 
果 ， 可 以 让 更 多 的 图 片 展示 在 有 限 的 空间 里 面 。 本 节 将 展示 图 片 滚动 的 两 种 方法 ， 分 别 为 
左右 滚动 和 上 下 滚动 。 


19.5.1 制作 图 片 左右 滚动 


图 片 左 右 滚 动 效 果 ， 可 以 通过 一 个 滚动 标签 ， 对 其 内 容 进 行 两 种 写法 。 本 小 节 将 用 两 
个 例子 来 介绍 这 两 种 写法 , 一 种 是 对 其 内 容 使 用 table 写法 ， 一 种 是 对 其 内 容 使 用 div+CSS 
写法 。 

【示例 19.13】 下 面 是 使 用 table 制作 图 片 左 右 滚动 的 效果 。 由 于 示例 是 用 标签 属性 来 进 
行 制作 ， 代 码 只 出 现在 <body> 标 签 里 ， 所 以 这 里 只 给 出 <body> 标 签 里 的 代码 。 代 码 如 下 : 

<body> 

<table border="1" bordercolor="#666666" cellpadding="5" cellspacing="0" 

bgcolor="#FFCCCC" > 

xt 
<td width="50px" align="center" > 
<font size="6" color="#FFFFFF"> 深 Enbsp; &nbsp; 动 gnbsp; gnbsp; 图 
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&nbsp; gnbsp; 片 </font> 

</td> 

过 WE 

KE 

< 
<marquee id="mar" onfinish="setTimeout ('mar.outerHTML=mar .outer 
HTML', 1000)" width="400px" height="190px" behavior="slide" 
onmouseover=this.stop() onmouseout=this.start() scrollAmount=1 
scrollDelay=1><!-- 定 义 当 滚动 完了 之 后 停顿 1 秒 重 新 开始 滚动 ， 设 置 当 鼠标 经 
过 图 片 停止 滚动 ， 当 鼠标 离开 图 片 继续 滚动 --> 

<table border="1" bordercolor="#FFFFFF"> 


<tr> 
<td><img src="../images/19.12 1.jpg" width="100px" 
height="100px"/></td> <!-- 插 入 图 片 --> 
<td><img src="../images/19.12 2.jpg" width="100px" 
height="100px"/></td> <!-- 插 入 图 片 --> 
<td><img src="../images/19.12 3.jpg" width="100px" 
height="100px"/></td> <!-- 插 入 图 片 --> 
<td><img src="../images/19.12 4.jpg" width="100px" 
height="100px"/></td> <!-- 插 入 图 片 --> 
<td><img src="../images/19.12 5.jpg" width="100px" 
height="100px"/></td> <!-- 插 入 图 片 --> 
<td><img src="../images/19.12 6.jpg" width="100px" 
height="100px"/></td> <!-- 插 入 图 片 --> 
</tr> 
</table> 
</marquee> 
</td> 
</Er> 
</table> 
</body> 


效果 如 图 19.15 所 示 。 


D 示 tN19.13 " SS ex 
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图 19.15 使 用 table 制作 图 片 堪 右 滚动 效果 图 


名 说明: 示例 中 的 图 片 是 从 右边 滚动 进入 左边 的 。 


【示例 19.14】 下 面 是 使 用 div+CSS 制作 图 片 左右 滚动 的 具体 效果 。 示 例 使 用 的 是 外 部 
样式 表 ， 放 在 css 文件 夹 里 ， 命 名 为 19.14.css。 这 里 将 分 别 给 出 CSS 文件 和 页 面 文件 的 代 
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码 ， 代 码 如 下 。 

CSS 文件 代码 : 

@charset "utf-8"7 

/*CSS Document*/ 

.mainfram 

{ 
width:455px; 
height:110px; 
background-color:#ffcccc; /* 设 置 背景 颜色 */ 
border:1lpx solid #666666; /* 设 置 边框 */ 

} 

.titlefram 

{ 
font-size:20px; /* 设 置 字体 大 小 */ 
text-align:center; /* 设 置 字体 居中 显示 */ 
Color:#FFFFFF; 
float:left; /* 设 置 左 浮动 */ 
width:50px; 
height:100px; 
padding-top:10px; /* 设 置 内 边 距 */ 

.rightfram 

下 
float:right; /* 设 置 右 浮动 */ 
height:100px; 
width:650px; 
margin-top:3px; /* 设 置 外 边 距 */ 
border:1lpx #FFFFFF solid; /* 设 置 边框 */ 

} 

.imgfram 

{ 
border:1Ppx #FFFFFF solid; /* 设 置 边框 */ 
float:left; /* 设 置 左 浮动 */ 


| 


在 CSS 文件 中 , 可 以 看 到 , 不 是 所 有 的 div+CSS 都 会 显得 非常 整洁 的 ， 这 便 是 一 个 比 
较 特 殊 的 例子 ， 使 用 div+CSS 之 后 ， 代 码 明 显 比 之 前 用 table 来 制作 显得 更 加 的 复杂 。 
页 面 文件 代码 : 


<body> 
<div class="mainfram"> 
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<div class="titlefram"> 深 <br /> 动 <br /> 图 <br /> 片 </div> 


<marquee id="mar" onfinish="setTimeout('mar.outerHTML=mar .outerHTML', 
1000)" width="400px" height="190px" behavior="slide" onmouseover=this 
.stop() onmouseout=this.start() scrollAmount=1 scrollDelay=1><!-- 定 义 
当 滚 动 完了 之 后 停顿 1 秒 重 新 开始 深 动 ， 设 置 当 鼠标 经 过 图 片 停止 滚动 ， 当 鼠标 离开 图 片 继续 


滚动 =-> 


<div class="rightfram"> 


<img src="../images/19.12 1.jpg" class="imgfram" 
height="100px"/> <!-- 插 入 图 片 --> 
<img src="../images/19.12 2.jpg" class="imgfram" 


height="100px"/> <!-- 揪 入 图 片 -~-> 
<img src="../images/19.12 3.jpg" class="imgfram" 
height="100px"/> <!-- 插 入 图 片 -~-> 
<img src="../images/19.12 4.jpg" class="imgfram" 


width="100px" 
width="100px" 
width="100px" 


width="100px" 
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height="100px"/> <!-- 插 入 图 片 --> 
<img src="../images/19.12 5.jpg" class="imgfram" width="100px" 
height="100px"/> <!-- 插 入 图 片 --> 
<img src="../images/19.12 6.jpg" class="imgfram" width="100px" 
height="100px"/> <!-- 插 入 图 片 --> 


</div> 
</marquee> 
</div> 
</body> 
效果 如 图 19.16 所 示 。 
人 Ee 
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和 言 C 省 昌 file:y//F:/bj/ 示 例 /第 19 章 /19.14.html 


图 19.16 ”使 用 div+CSS 制作 图 片 左 右 滚动 效果 图 


全 说 明 : 示例 中 图 片 滚动 ， 没 有 出 现 多 余 的 空白 内 容 滚动 ， 图 片 是 从 右 到 左 进行 滚动 的 。 


19.5.2 ”制作 图 片上 下 滚动 


图 片上 下 滚动 效果 ， 可 以 通过 一 个 滚动 标签 ， 对 其 内 容 进行 两 种 写法 。 本 小 节 将 用 两 
个 例子 来 介绍 这 两 种 写法 , 一 种 是 对 其 内 容 使 用 table 写法 ， 一 种 是 对 其 内 容 使 用 div+CSS 
写法 。 

【示例 19.1S】 下 面 是 使 用 table 制作 图 片上 下 滚动 的 具体 效果 。 由 于 示例 是 用 标签 属性 
来 进行 制作 ， 代 码 只 出 现在 <body> 标 签 里 ， 所 以 这 里 只 给 出 <body> 标 签 里 的 代码 。 代 码 
如 下 : 


<body> 
<table border="1" bordercolor="#666666" cellpadding="5" cellspacing="0" 
bgcolor="#ffcccc"> 
<tr> 
<td height="30px" align="center"> 
<font size="4" color="#FFFFFF"> 深 动 图 片 </font> 
</td> 
WE 
<tr> 
<td> 
<marquee id="mar" onfinish="setTimeout('mar.outerHTML=mar.outer 
HTML', 1000)" width="144px" height="400px" direction="up" 
onmouseover=this.stop() onmouseout=this.start() scrollAmount=1 
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scrollDelay=1> <!-- 定 义 当 滚动 完了 之 后 停顿 1 秒 重新 开始 滚动 ， 设 置 当 鼠 
标 经 过 图 片 停止 滚动 ， 当 鼠标 离开 图 片 继续 滚动 --> 


<table border="1" bordercolor="#FFFFFF"> 


和 字 学 
<td><img src="../images/19.12 1.jpg" width="100px" 
height="100px"/></td> <!-- 插 入 图 片 --> 

< 人/EE> 

<Er> 
<td><img src="../images/19.12 2.jpg" width="100px" 
height="100px"/></td> <!-- 插 入 图 片 --> 

</tr> 

KE 
<td><img src="../images/19.12 3.jpg" width="100px" 
height="100px"/></td> <!-- 插 入 图 片 --> 

</tr> 

KEF> 
<td><img src="../images/19.12 4.jpg" width="100px" 
height="100px"/></td> <!-- 插 入 图 片 --> 

WEr> 

< 
<td><img src="../images/19.12 5.jpg" width="100px" 
height="100px"/></td> <!-- 插 入 图 片 --> 

</tr> 

<tr> 
<td><img src="../images/19.12 6.jpg" width="100px" 
height="100px"/></td> <!-- 插 入 图 片 --> 

</tr> 

</table> 
</marquee> 
</td> 
</tr> 
</table> 
</body> 


效果 如 图 19.17 所 示 。 
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图 19.17 使 用 table 制作 图 片上 下 滚动 效果 图 


“308。 
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全 说 明 : 示例 中 的 图 片 是 从 下 到 上 进行 滚动 的 。 


【示例 19.16】 下 面 是 使 用 div+CSS 制作 图 片上 下 滚动 的 具体 效果 。 示 例 使 用 的 是 外 部 
样式 表 ， 放 在 css 文件 夹 里 ， 命 名 为 19.16.css。 这 里 将 分 别 给 出 CSS 文件 和 页 面 文件 的 代 
码 ， 代 码 如 下 。 

CSS 文件 代码 : 


@charset "utf-8"; 
/*CSS Document*/ 


.mainfram 
{ 
width:150px; 
height:460px; 
background-color:#6699FF; /* 设 置 背景 颜色 */ 
border:1px solid #0099FF; /* 设 置 边框 */ 
.titlefram 
i 
font-size:24px; /* 设 置 字体 大 小 */ 
text-align:center; /* 设 置 字体 居中 显示 */ 
Color:#FFFFFF; 
height:40px; 
padding-top:10px; /* 设 置 内 边 距 */ 
由 
.rightfram 
{ 
Float righi /* 设 置 右 浮动 */ 
height:400px; 
width:134px; 
margin-top: 3px; /* 设 置 外 边 距 */ 
border:1Ppx #FFFFFF solid; /* 设 置 边框 */ 
} 
.imgfram 
{ 
border:1lpx #FFFFFF solid; /* 设 置 边框 */ 
float:left; /* 设 置 左 浮动 */ 


} 


在 CSS 代码 中 ， 可 以 看 到 ， 其 实 左右 滚动 和 上 下 滚动 的 代码 都 是 差不多 的 。 
页 面 文件 代码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 
WWW.Ww3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
<html xmlns="http://www.w3.o0rg/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 19.16</title> 
<link href="../css/19.16.css" rel="stylesheet" type="text/css" /> 
<!-- 调 用 外 部 样式 表 --> 
</head> 
<body> 
<div class="mainfram"> 
<div class="titlefram"> 滚 动 图 片 </div> 
<marquee id="mar" onfinish="setTimeout('mar.outerHTML=mar.outerHTML"', 
1000)" width="130px" height="400px" direction="up" onmouseover= 
this.stop() onmouseout=this.start() scrollAmount=1 scrollDelay=1> 
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<!-- 定 义 当 滚动 完了 之 后 停顿 1 秒 重 新 开始 滚动 ， 设 置 当 鼠 标 经 过 图 片 停止 滚动 ， 当 鼠标 离 
开 图 片 继续 滚动 --> 
<div class="rightfram"> 


<img src="../images/19.12 1.jpg" class="imgfram" width="100px" 


height="100px"/> <! 一 -插入 图 片 --> 
<img src="../images/19.12 2.jpg" class="imgfram" width="100px" 
height="100px"/> <! 一 -插入 图 片 --> 
<img src="../images/19.12 3.jpg" class="imgfram”" width="100px" 
height="100px"/> <!-- 插 入 图 片 --> 
<img src="../images/19.12 4.jpg" class="imgfram" width="100px" 
height="100px"/> <!-- 插 入 图 片 --> 
<img src="../images/19.12 5.jpg" class="imgfram" width="100px" 
height="100px"/> <!-- 插 入 图 片 --> 
<img src="../images/19.12 6.jpg" class="imgfram" width="100px" 
height="100px"/> <!-- 插 入 图 片 --></div> 
</marquee> 

</div> 

</body> 

</html> 


效果 如 图 19.18 所 示 。 
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图 19.18 使 用 div+CSS 制作 图 片上 下 滚动 效果 图 
外 说 明 : 示例 中 的 图 片 是 从 下 向 上 滚动 的 。 
19.6 ”制作 文字 滚动 
文字 滚动 也 就 是 前 面 所 说 的 字幕 滚动 ， 它 也 是 网 站 应 用 中 很 常见 的 一 种 文字 显示 效 
果 。 本 节 将 通过 两 种 方法 ， 分 别 介绍 制作 左右 滚动 的 文字 效果 和 上 下 滚动 的 文字 效果 。 
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19.6.1 制作 文字 左右 滚动 


制作 左右 滚动 的 文字 效果 ， 可 以 有 两 种 制作 方法 。 本 小 节 将 用 两 个 例子 分 别 介绍 这 两 
种 制作 方法 ， 一 种 是 使 用 table 制作 文字 滚动 的 效果 ， 一 种 是 使 用 div+CSS 制作 文字 滚动 
的 效果 。 

【示例 19.17】 下 面 是 使 用 table 制作 文字 左右 滚动 的 具体 效果 。 由 于 示例 是 用 标签 属性 
来 进行 制作 ， 代 码 只 出 现在 <body> 标 签 里 ， 所 以 这 里 只 给 出 <body> 标 签 里 的 代码 。 代 码 
如 下 : 


<body> 
<table border="1" bordercolor="#666666" cellpadding="5" cellspacing="0" 
bgcolor="#ffcccc" > <! 一 -设置 表格 边框 颜色 和 背景 颜色 --> 

<tEr> 


<td height="30px" align="center"> 
<font size="3" color="#FFFFFF"> 深 动 字 幕 </font> 
</td> 
</tr> 
<tr> 
<td> 
<marquee id="mar" onfinish="setTimeout ('mar.outerHTML=mar .outer 
HTML"' ,1000) "width="250px"height="40px"behavior="slide"onmouseover 
this.stop() onmouseout=this.start() scrollAmount=1 
scrollDelay=1> <!-- 定 义 当 滚动 完了 之 后 停顿 1 秒 重新 开始 滚动 ， 设 置 当 鼠 
标 经 过 图 片 停止 滚动 ， 当 鼠标 离开 图 片 继续 滚动 --> 
<table> 
<tr> 
<tqd> 欢 迎 光临 我 的 博客 </td> 
</tr> 
</table> 
</marquee> 
</td> 
</tr> 
</table> 
</body> 


DAMN917 由 王 
效果 如 图 19.19 所 示 。 和 访 C 前 @file/WFVbj/ 示 例 /第 19 童 /全 以 


人 说明， 示例 中 的 文字 是 从 右 到 左 迁 行 深 动 的 天 
【示例 19.18】 下 面 是 使 用 div+CSS 制作 文字 


左右 滚动 的 具体 效果 。 示 例 使 用 的 是 外 部 样式 表 ， 

放 在 css 文件 夹 里 ， 命 名 为 19.18.css。 这 里 将 分 

别 给 出 CSS 文件 和 页 面 文件 的 代码 ， 代 码 如 下 。 
CSS 文件 代码 : 


图 19.19 使 用 table 制作 文字 左右 滚动 效果 图 


@charset "utf-8"; 
/*CSS Document*/ 
-mainfram 
{ 
width:250px; 
height:90px; 
background-color:#ffcccc; /* 设 置 背景 颜色 */ 


二 二 是 有 二 
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border:1px solid #666666; /* 设 置 边框 */ 

上 

-titlefram 

3 
font-size:18px; /* 设 置 字体 大 小 */ 
text-align:center; /* 设 置 字体 居中 显示 */ 
Color:#FFFFFF; 
float:left; /* 设 置 左 浮动 */ 


height:30px; 
width:250px; 
padding-top:15px; /* 设 置 内 边 距 */ 
border-bottom:1px #666666 solid; 
} 
.rightfram 
{ 
height:50px; 
width:200px; 
padding-top:3px; /* 设 置 外 边 距 */ 
} 


在 CSS 中 ， 其 实 不 难 察觉 到 ， 在 使 用 中 经 常用 到 的 属性 也 就 那 几 个 ， 而 其 他 的 都 比较 
少 用 。 只 要 布局 定 得 好 ， 几 个 简单 的 属性 也 可 以 做 出 很 好 的 效果 了 。 
页 面 文件 代码 : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 
WWW.W3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
<html] xmlns="http://www.w3.0org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 19.18</title> 
<link href="../css/19.18.css" rel="stylesheet" type="text/css" /> 
<!-- 调 用 外 部 样式 表 --> 
</head> 
<body> 
<div class="mainfram"> 
<div class="titlefram"> 深 enbsp; 动 gnbsp; 字 &nbsp; 幕 </div> 
<marquee id="mar" onfinish="setTimeout('mar.outerHTML=mar .outerHTML', 
1000)" width="250px" height="50px" behavior="slide" onmouseover= 
this.stop() onmouseout=this.start() scrollAmount=]1 scrollDelay=1> 
<! 一 -定义 当 深 动 完了 之 后 停顿 1 秒 重新 开始 滚动 ， 设 置 当 鼠标 经 过 图 片 停止 滚动 ， 当 鼠标 离 
开 图 片 继续 滚动 --> 
<div class="rightfram"> 你 好 ， 欢 迎 光 临 我 的 博客 </div> 
</marquee> 
</div> 
</body> 
</html> 


效果 如 图 19.20 所 示 。 
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全 说 明 : 示例 中 的 文字 是 从 右 到 左 进行 滚动 的 。 


19.6.2 ”制作 上 下 滚动 


制作 上 下 滚动 的 文字 效果 ， 可 以 有 两 种 制作 方法 。 本 小 节 将 用 两 个 例子 分 别 介绍 这 两 
种 制作 方法 ， 一 种 是 使 用 table 制作 文字 滚动 的 效果 ， 一 种 是 使 用 div+CSS 制作 文字 滚动 
的 效果 。 

【示例 19.19】 下 面 是 使 用 table 制作 上 下 滚动 的 具体 效果 。 代 码 如 下 : 


<body> 
<table border="1" bordercolor="#666666" cellpadding="5" cellspacing="0"> 
<tr> 
<td height="40px" align="center" bgcolor="#ffcccc"> 
<font size="3" color="#FFFFFF"> 最 新 动态 </font> 
</td> 
</tr> 
<tr> 
<Ed> 
<marquee id="mar" onfinish="setTimeout ('mar.outerHTML=mar.outer 
TML', 1000)" width="120px" height="130px" direction="up" 
onmouseover=this.stop() onmouseout=this.start() scrollAmount=1 
scrollDelay=1> <!-- 定 义 当 深 动 完 了 之 后 停顿 1 秒 重 新 开始 深 动 ， 设 置 当 鼠 
标 经 过 图 片 停止 滚动 ， 当 鼠标 离开 图 片 继续 滚动 --> 
<table> 
<Etr> 
<th> 公 告 </th> 
</tr> 
< 
Ss size="2" color="#FF0000"> 博 客 最 新 内 容 ， 最 新 日 
志 ， 欢 迎 光临 </font></td> <!-- 设 置 公告 内 容 字 体 大 小 --> 
KEE> 
</table> 
</marquee> 
</td> 
</tr> 
</table> 
</body> CH of A 


效果 如 图 19.21 所 示 。 
全 说 明 : 示例 中 的 文字 是 从 下 到 上 进行 滚动 的 。 


【示例 19.20】 下 面 是 使 用 div+CSS 制作 文字 上 
下 滚动 的 效果 。 示 例 使 用 的 是 外 部 样式 表 ， 放 在 css 
文件 夹 里 ， 命 名 为 19.20.css。 这 里 将 分 别 给 出 CSS 
文件 和 页 面 文件 的 代码 ， 代 码 如 下 。 图 19.21 使 用 table 制作 上 下 滚动 效果 图 
CSS 文件 代码 : 


@charset "utf-8"; 
/*CSS Document*/ 
-mainfram 


上 


WTA Wd 


2 最 新 
地 光临 


width:150px; 


wt 
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height:180px; 


border:1px solid #666666; /* 设 置 边框 */ 

’ 

.titlefram 

3 
font-size:18px; /* 设 置 字体 大 小 */ 
text-align:center; /* 设 置 字体 居中 显示 */ 
Color:#FFFFFF; 
float:left; /* 设 置 左 浮动 */ 


height:30px; 
width:150px; 
background-color:#ffcccc; /* 设 置 背景 颜色 */ 
padding-top:15px; /* 设 置 内 边 距 */ 
border-bottom:1lpx #666666 solid; 
和 
.rightfram 
{ 
height:130px; 
width:120px; 


padding-top:3px; /* 设 置 外 边 距 */ 
text-align:justify; /* 设 置 字体 两 端 对 齐 */ 
padding-left:20px; 

Color:#F00; 


有 
页 面 文 件 代码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www 
.W3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
<html xmlns="http://www.w3.0org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 19.20</title> 
<link href="../css/19.20.css" rel="stylesheet" type="text/css" /> 
<!-- 调 用 外 部 样式 表 --> 
</head> 
<body> 
<div class="mainfram"> 
<div class="titlefram"> 滚 动 字 幕 </div> 
<marquee id="mar" onfinish="setTimeout ('mar.outerHTML=mar .outerHTML ' ， 
1000)" width="120px"” height="130px" direction="up" onmouseover= 
this.stop() onmouseout=this.start() scrollAmount=]1 scrollDelay=1> 
<! 一 定义 当 深 动 完了 之 后 停顿 1 秒 重 新 开始 滚动 ， 设 置 当 鼠标 经 过 图 片 停止 滚动 ， 当 鼠标 离 
开 图 片 继续 滚动 -=-> 
<div class="rightfram"> 博 客 最 新 内 容 ， 最 新 日 志 ， 欢 迎 光临 </div> 
</marquee> 
</div> 
</body> 
</html> 


效果 如 图 19.22 所 示 。 
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全 说 明 : 示例 中 的 文字 是 从 下 到 上 进行 滚动 的 。 
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图 19.22 ”使 用 div+CSS 制作 上 下 滚动 效果 图 


19.7 本 章 小 结 
本 章 主要 学 习 了 博客 制作 中 经 常会 用 到 的 一 些 实例 ， 形 成 一 个 博客 的 雏形 。 详 细 讲 解 


了 博客 中 文本 内 容 、 列 表 、 留 言 表 、 滚 动 图 片 和 滚动 文字 的 制作 过 程 。 当 然 这 些 只 是 网 站 
制作 中 的 一 部 分 ， 下 一 章 我 们 将 讲解 网 站 制作 中 经 常会 用 到 的 一 些 实例 。 


人 
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在 网 站 制作 中 ， 不 同 的 网 站 也 经 常会 包含 相同 的 模块 ， 网 站 的 大 致 结构 都 是 一 样 的 。 
上 一 章 所 讲 的 博客 雏形 里 的 实例 ， 在 其 他 网 站 制作 中 也 是 经 常会 用 到 的 ， 只 要 改变 一 下 标 
题 、 图 片 、 内 容 就 可 以 了 。 本 章 将 继续 介绍 网 站 制作 中 经 常会 用 到 的 一 些 模 块 ， 这 些 模块 
都 是 稍微 修改 一 下 就 可 以 直接 使 用 的 。 


20.1 制作 导航 条 


导航 条 是 指 网 站 的 菜单 ， 通 过 它 可 以 跳 转 到 网 站 的 任何 页 面 。 它 是 网 站 中 最 关键 的 地 
方 ， 因 为 它 贯穿 了 整个 网 站 。 本 节 将 介绍 两 种 常用 的 导航 条 制作 方法 ， 分 别 是 制作 横向 导 
航 条 和 制作 纵向 导航 条 。 


20.1.1 制作 横向 导航 条 


制作 横向 导航 条 有 两 种 制作 方法 ， 本 小 节 将 用 两 个 例子 分 别 介绍 这 两 种 制作 方法 ， 
种 是 使 用 table 制作 横向 导航 条 ， 一 种 是 使 用 div+CSS 制作 横向 导航 条 。 
【示例 20.1】 下 面 是 使 用 table 制作 横向 导航 条 的 效果 。 这 里 将 会 制作 鼠标 经 过 图 像 的 
导航 条 ， 由 于 使 用 table 和 标签 属性 来 进行 制作 ， 需 要 为 导航 条 加 上 一 段 JavaScript 代码 。 
JavaScript 代码 如 下 : 


<!-- JavaScript 程序 代码 开始 --> 
<script type="text/javascript"> 
< = 
function MM swapImgRestore() { //v3.0 
var i,x,a=document .MM sr; for(i=0;ag&i<a.lengthgg (x=a[li])&&x.oSrc;i++) 
X.SrIC=X.OSrc; 
} 
function MM preloadImages() { //v3.0 
var d=document; if(d.images){ if(!d.MM p) d.MM p=new Array(); 
var i,j=d.MM p.length,a=MM preloadImages.arguments; for(i=0; i<a.length; 
i++) 
if (a[il].indexOf ("#") !=0){ d.MM p[j]=new Image; d.MM p[j++] .src=a 
[i];}} 
} 


function MM findobj(n, d) { //v4.01 
Var pi,x; if(!d) d=document; if((p=n.indqexof("?"))>0&&parent.frames - 
length) { 
d=parent .frames[n.substring (p+1)] .document; n=n.substring(0,p);} 
if(! (x=d[n])&&d.all) x=d.all[n]; for (i=0; !x&&i<d.forms.length;i++) 
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x=d.forms{[i][n]; 

for (i=0; !x&&d.layersg&i<d.layers.length;i++) x=MM findObj (n,d.layers([i] 
.document); 

if(!x && d.getElementById) x=d.getElementById(n); return x; 


function MM swapImage() { //v3.0 
var i,j=0,x,a=MM swapImage.arguments; document.MM sr=new Array; for 
(i=0;i<(a.length-2) ;i+=3) 
if ((x=MM findObj (a[il]))!=null) {document.MM sr[j++]=x; if(!x.oSrc) 
X.OSrc=x.src; x.src=a[i+2];} 


} 
> 
</script> 


<!-- JavaScript 程序 代码 结束 --> 
HTML 代码 如 下 : 


<body onload="MM preloadImages('../images/20.1.1.jpg','../images/20.2.1 


.jpg','../images/20.3.1.jpg','../images/20.4.1.jpg')"> 
<table border="0" cellpadding="0" cellspacing="0"> 
< 


<td width="84"> 
<a href=".." onmouseout="MM swapImgRestore()" onmouseover="MM 
swapImage('Imagel','','../images/20.1.1.jpg',1)"><img src=".. 
/images/20.1.jpg" alt=" 关 于 我 们 " name="Imagel" width="84px" 
height="27px" border="0" id="Imagel" /></a> <!-- 设置 鼠标 经 过 图 


像 的 超 链接 --> 
</td> 
<td width="81"> 
<a href=".." onmouseout="MM swapImgRestore()" onmouseover="MM_ 


swapImage ('Image2','','../images/20.2.1.jpg',1)"><img src=".. 
/images/20.2.jpg" alt=" 鲜 花 展示 " name="Image2" width="81px" height= 
"27px" border="0" id="Image2" /></a><!-- 设置 鼠标 经 过 图 像 的 超 链接 --> 
</td> 
<td width="66"> 
<a href=".." onmouseout="MM swapImgRestore()" onmouseover="MM_ 
swapImage ('Image3','','../images/20.3.1.jpg',1)"><img src=".. 
/images/20.3.jpg" alt=" 留 言 版 " name="Image3" width="66px" height= 
"27px" border="0" id="Image3" /></a><!-- 设置 鼠标 经 过 图 像 的 超 链接 --> 
</td> 
<td width="89"> 
<a href=".." onmouseout="MM swapImgRestore()" onmouseover="MM 
swapImage ('Imaged4','','../images/20.4.1.jpg',1)"><img src=".. 
/images/20.5.jpg" alt=" 联 系 我 们 " name="Image4" width="89px" height= 
"27px" border="0" id="Image4" /></a><!-- 设置 鼠标 经 过 图 像 的 超 链接 --> 
</td> 
</Er> 
</table> 
</body> 


效果 如 图 20.1 所 示 。 
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图 20.1 使 用 table 制作 横向 导航 条 效果 图 


名 说明: 使 用 table 制作 横向 导航 条 必须 用 到 脚本 和 JavaScript 程序 才 可 以 实现 ， 但 使 用 
div+CSS 会 是 一 个 截然 不 同 的 制作 方法 。 


【示例 20.2】 下 面 是 使 用 div+CSS 制作 横向 导航 条 的 效果 。 示 例 使 用 的 是 外 部 样式 表 ， 
放 在 css 文件 夹 里 ， 命 名 为 20.2.css。 这 里 将 分 别 给 出 CSS 文件 和 页 面 文件 的 代码 ， 代 码 
如 下 。 

CSS 文件 代码 : 

@charset "utf-8"; 


/*CSS Document*/ 
*{margin:0; padding:0px;} 


ul 

. 
list-style-type:none; /* 定 义 列表 不 显示 自 带 图 案 */ 
margin:10px; 

} 

li{display:block; float:left;} /* 设 置 列表 横向 浮动 */ 

1i a#imgl 
display:block; /* 设 置 图 片 显示 位 置 */ 
background:url (../images/20.1.jpg) no-repeat; /* 定 义 背 景 图 片 */ 
width:87px; 
height:27px; 

} 


1i a#imgl:hover{background:url(../images/20.1.1.jpg) no-repeat;} 
/* 定 义 鼠标 经 过 显示 背景 图 片 */ 


1i a#img2 

{ 
display:block; /* 设 置 图 片 显示 位 置 */ 
background:url (../images/20.2.jpg) no-repeat; /* 定 义 背 景 图片 */ 
width:87px; 
height:27px; 

由 


1i a#img2:hover{background:url(../images/20.2.1.jpg) no-repeat;} 
/* 定 义 鼠 标 经 过 显示 背景 图 片 */ 


1i a#img3 

{ 
display:block; /* 设 置 图 片 显示 位 置 */ 
background:url(../images/20.3.jpg) no-repeat; /* 定 义 背景 图 片 */ 


width:87px; 
height:27px; 
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1i a#img3:hover{background:url(../images/20.3.1.jpg) no-repeat;} 
/* 定 义 鼠 标 经 过 显示 背景 图 片 */ 


1i a#img4 

{ 
display:block; /* 设 置 图 片 显示 位 置 */ 
background:url(../images/20.5.jpg) no-repeat; /* 定 义 背 景 图 片 */ 


width:87px; 
height:27px; 
} 
1i a#img4:hover{background:url(../images/20.4.1.jpg) no-repeat;} 
/* 定 义 鼠标 经 过 显示 背景 图 片 */ 


在 CSS 文件 中 ， 使 用 了 伪 类 来 制作 鼠标 经 过 图 片 的 效果 ， 这 是 一 个 很 方便 整洁 、 简 单 


而 容易 管理 的 用 法 。 


页 面 文件 代码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www 
.W3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 20.2</title> 
<link href="../css/20.2.css" rel="stylesheet" type="text/css" /> 
<!-- 调用 外 部 样式 表 --> 

</head> 
<body> 
<ul> 

<li><a href=" 


id="imgl"></a></1i> 
<li><a href= id="img2"></a></1i> 
<1i><a href= id="img3"></a></1i> 
<li><a href="..." id="img4"></a></1i> 


</ul> 

</body> 

</html> 
效果 如 图 20.2 所 示 。 
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图 20.2 使 用 div+CSS 制作 横向 导航 条 效果 图 


名 说明: 在 横向 导航 条 里 ， 可 以 看 到 两 个 示例 都 是 用 图 片 来 做 导航 条 。 


下 面 将 介绍 一 个 使 用 阴影 来 实现 漂亮 的 导航 条 效果 的 例子 。 
【示例 20.3】 下 面 是 使 用 div+CSS 实现 阴影 导航 条 的 效果 。 示 例 使 用 的 是 外 部 样式 表 ， 


放 在 css 文件 夹 里 ， 命 名 为 20.3.css。 这 里 将 分 别 给 出 CSS 文件 和 页 面 文件 的 代码 ， 代 码 
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如 下 。 
CSS 文件 代码 : 


Q@charset "utf-8"; 
/*CSS Document*/ 
#nav 1i 
| 
float:left; 
margin-left:30px; 


} 
#nav span{display:none;} 
#nav a /* 制 作 超 链 接 效果 */ 
{ 
font-size:14px; 
text-decoration: none; 
display:block; 
font-weight:bold; 
Color:#06F; 
} 
#nav a:hover 
Ui 
top:1px; 
left:1px; 
position:relative; 
color:#9CF; /* 设 置 阴影 颜色 */ 
上 
#nav a:hover span 
{ 
display:block; 


top:=—2p2> 

Teoft:= 2pX7 

position:absolute; 

color:#000; /* 设 置 字体 颜色 */ 
} 
页 面 文件 代码 : 


<!DOCTYPE html] PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www 
.W3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.0org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 


<title> 示 例 20.3</title> 


<link href="../css/20.3.css" rel="stylesheet" type="text/css" /> <!-- 
调用 外 部 样式 表 --> 
</head> 
<body> 
<div id="nav"> 
<ul> 


<1i><a href="..."> 关 于 我 们 <span> 关 于 我 们 </span></a></1i> 
<l1i><a href="..."> 鲜 花 展示 <span> 鲜 花 展示 </span></a></1i> 
<l1i><a href="..."> 留 言 版 <span> 留 言 版 </span></a></1i> 
<1i><a href="..."> 联 系 我 们 <span> 联 系 我 们 </span></a></1i> 
</ul> 

</div> 

</body> 

</html> 
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效果 如 图 20.3 所 示 。 
) SW203 -\— 
全 访 CG 从 file:///F:/bj/ 示 例 /第 20 章 /20.3.html 家 入 


。 。 鲜花 展示 。 留言 版 。 联系 我 们 


fleVWFVbj/ 示 纲 / 笋 20 章 /一 


图 20.3 使 用 div+CSS 实现 阴影 导航 条 效果 图 


外 说 明 : 当 饼 标 放 到 导航 条 时 ， 会 出 现 阴 影 效 果 ， 如 图 20.3 所 示 。 


20.1.2 ”制作 纵向 导航 条 


制作 纵向 导航 条 有 两 种 制作 方法 ， 本 小 节 将 用 两 个 例子 分 别 介绍 这 两 种 制作 方法 ， 
种 是 使 用 table 制作 纵向 导航 条 ， 一 种 是 使 用 div+CSS 制作 纵向 导航 条 。 

【示例 20.4】 下 面 是 使 用 table 制作 纵向 导航 条 的 具体 效果 。 这 里 将 会 制作 鼠标 经 过 图 
像 的 导航 条 ， 由 于 使 用 table 和 标签 属性 来 进行 制作 ， 需 要 为 导航 条 加 上 一 段 JavaScript 
代码 。 

JavaScript 代码 如 下 : 


<!DOCTYPE html] PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www 
.W3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
<htm1l xmlns="http://www.w3.0org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 20.4</title> 
<!-- JavaScript 程序 代码 开始 --> 
<script type="text/javascript"> 
ee 
function MM swapImgRestore() { //v3.0 
Var i,x,a=document .MM sr; for(i=0;agg&i<a.lengthgg (x=a[i])&é&x.oSrc;i++) 
-SrC=X.OSrc; 
” 
function MM preloadImages() { //v3.0 
var d=document; if(dq.images){ if(!dq.MM p) d.MM p=new Array(); 
var i,j=d.MM p.length,a=MM preloadImages.arguments; for(i=0; i<a 
.length; i++) 
if (a[il].indexOf ("#") !=0){ d.MM p[j]=new Image; d.MM pl[j++] .src=a[i];}} 
} 


function MM findobj(n, d) { //v4.01 
var pi,x; if(!d) d=document; if((p=n.indexOf ("?"))>0ggparent.frames 
-length) { 
d=parent .frames[n.substring (p+1)] .document; n=n.substring(0,p);} 
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0; !x&&i<d.forms.length;i++) 
X=d. forms [i] [n]; 
for (i=0; !x&&d.layersgt&i<d.layers.length;i++) 
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x=MM findob]j (n,d.layers[il].document); 
if(!'x && d.getElementById) x=d.getElementById(n); return x; 


. 


function MM swapImage() { //v3.0 
var i,j=0,x,a=MM swapImage.arguments; document.MM sr=new Array; for(i= 
0;i<(a.length-2) ;i+=3) 
if ((x=MM findObj (a[il]))!=null) {document.MM sr[j++]=x; if(!x.oSrc) 
Xs:OSIC=X -SIC; XSrc=al[li+2];?} 

} 

N= 

</script> 


<!-- JavaScript 程序 代码 结束 --> 


HTML 代码 如 下 : 


<body onload="MM preloadImages ('images/aboutover.jpg')"> 
<table border="0" cellpadding="0" cellspacing="0"> 
EE 
<td height="30px"> 
<a href="..." onmouseout="MM swapImgRestore()" onmouseove 
swapImage ('Imagel','','../images/20.1.1.jpg',1)"><img sr 
/images/20.1.jpg"”alt=" 关 于 我 们 " name="Imagel" width="80px" 
height="27px" border="0" id="Image2" /></a> 
<!-- 设置 鼠标 经 过 图 像 的 超 链接 --> 


</td> 
E> 
<tr> 
<td height="30px"> 
<a href="..." onmouseout="MM swapImgRestore()" onmouseover="MM 
swapImage ('Image2','','../images/20.2.1.jpg',1)"><img src=".. 
/images/20.2.jpg" alt=" 鲜 花 展 示 "” name="Image2" width="80px" 
height="27px" border="0" id="Image2" /></a> 
<!-- 设置 鼠标 经 过 图 像 的 超 链接 --> 


</td> 
</tr> 
Er 
<td height="30px"> 
<a href="..." onmouseout="MM swapImgRestore()" onmouseover="MM 
swapImage ('Image3','','../images/20.3.1.jpg',1)"><img src=".. 
/images/20.3.jpg" alt=" 和 留言 版 " name="Image3" width="80px" height= 
"27px" border="0" id="Image3" /></a><!-- 设置 鼠标 经 过 图 像 的 超 链接 --> 
</td> 
HEr> 
EF 
<td height="30px"> 
<a href="..." onmouseout="MM swapImgRestore()" onmouseover="MM 
swapImage ('Image4','','../images/20.4.1.jpg',1)"><img src=".. 
/images/20.5.jpg" alt=" 联 系 我 们 " name="Image4" width="80px" height= 
"27px" border="0" id="Image4" /></a><!-- 设置 鼠标 经 过 图 像 的 超 链接 --> 


</td> 
</tr> 
</table> 
</body> 
效果 如 图 20.4 所 示 。 


第 20 章 ”网 站 常用 模块 


EE "| x 


CN OfleNF A 


3 


files///F/bj/ 示 全 /第 20 意 /.… 


加 


图 20.4 使 用 table 制作 纵向 导航 条 效果 图 


外 说 明 : 当 鼠 标 放 在 导航 条 图 片上 ， 导 航 条 图 片 将 会 改变 样式 ， 如 图 20.4 所 示 。 


【示例 20.5】 下 面 是 使 用 div+CSS 制作 纵向 导航 条 的 效果 。 示 例 使 用 的 是 外 部 样式 表 ， 
放 在 css 文件 夹 里 ， 命 名 为 20.5.css。 这 里 将 分 别 给 出 CSS 文件 和 页 面 文件 的 代码 ， 代 码 
如 下 。 

CSS 文件 代码 : 

@charset "utf-8"; 

/*CSS Document*/ 

*{margin:0; padding:0px;} 

uli 

list-style-type:none; /* 定 义 列表 不 显示 自 带 图 案 */ 
margin:10px; /* 设 置 外 边 距 */ 
font-size:12px; 

text-align:center; 


1i a#imgl{ 
display:block; /* 设 置 图 片 显示 位 置 */ 
background:url(../images/20.1.jpg) no-repeat; /* 定 义 背 景 图 片 */ 
border:1lpx solid #ffffff; /* 设 置 边框 */ 
width:90px; height:22px; 
padding-top: 8px; /* 设 置 内 边 距 */ 
text-decoration:none; /* 设 置 字体 没有 下 划 线 */ 
j 
li a#imgl:hover{background:url(../images/20.1.1.jpg)} 
/* 定 义 鼠 标 经 过 显示 背景 图 片 */ 
1i a#img2{ 
display:block; /* 设 置 图 片 显示 位 置 */ 
background:url(../images/20.2.jpg) no-repeat; /* 定 义 背 景 图 片 */ 
border:1px solid #ffffff; /* 设 置 边 框 */ 
Color:#FFFFFF; width:90px; height:22px; 
padding-top: 8px; /* 设 置 内 边 距 */ 
text-decoration:none; /* 设 置 字体 没有 下 划 线 */ 


li a#img2:hover{background:url(../images/20.2.1.jpg)} 
/* 定 义 鼠 标 经 过 显示 背景 图 片 */ 
a 


Ei 


a#img3{ 
display:block; /* 设 置 图 片 显示 位 置 */ 
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background:url(../images/20.3.jpg) no-repeat; /* 定 义 背 景 图 片 */ 
border:1px solid #ffffff; /* 设 置 边框 */ 
Color:#FFFFFF; width:90px; height:22px; 
padding-top:8px; /* 设 置 内 边 距 */ 
text-decoration:none; /* 设 置 字体 没有 下 划 线 */ 
. 
li a#img3:hover{background:url(../images/20.3.1.jpg)} 
/* 定 义 鼠 标 经 过 显示 背景 图 片 */ 
1i a#jirmg4f 
display:block; /* 设 置 图 片 显示 位 置 */ 
background:url(../images/20.5.jpg) no-repeat; /* 定 义 背 景 图 片 */ 
border:1lpx solid #ffffff; /* 设 置 边 框 */ 
Color:#FFFFFF; width:90px; height:22px; 
padding-top:8px; /* 设 置 内 边 距 */ 
text-decoration:none; /* 设 置 字体 没有 下 划 线 */ 


站 
1i a#img4:hover{background:url(../images/20.4.1. 
证 区 经过 显示 音 景 图 片 :/ 


由 于 CSS 文件 里 代码 比较 长 ， 所 以 在 这 里 可 能 没 能 按 之 前 的 一 个 属性 一 行 来 进行 书 
写 ,书写 格式 在 编辑 器 里 ， 还 是 提倡 尽量 一 行 一 个 属性 为 好 。 
页 面 文 件 代码 : 


<!IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 
WWW.W3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
<htm1l xmlns="http://www.w3.o0rg/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 20.5</title> 
<link href="../css/20.5.css" rel="stylesheet" type="text/css" /> <!-- 
调用 外 部 样式 表 --> 
</head> 
<body> 
<ul> 
<li><a href=" 
<li><a href=" 
<1i><a href="... 
<1i><a href="..." id="img4"></a></1i> 
</ul> 
</body> 
</html> 


效果 如 图 20.5 所 示 。 


且说 明 : 使 用 div+CSS 来 制作 导航 条 ， 可 以 做 出 多 种 效果 ， 而 
使 用 table 制作 导航 条 的 话 ， 只 能 使 用 图 片 效 果 ， 而 
不 能 使 用 改变 背景 颜色 或 者 改变 字体 颜色 来 制作 导航 条 。 


id="imgl"></a></1i> 
id="img2"></a></1i> 


党 5 
id="img3"></a></1i> oO Me 


图 20.5 使 用 div+CSS 制作 
纵向 导航 条 效果 图 


20.2 ”制作 下 拉 菜 单 


下 拉 菜 单 通常 应 用 于 把 一 些 具有 相同 功能 的 分 类 放 在 一 起 ， 并 把 这 个 下 拉 菜 单 置 于 导 


.324 。 
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航 条 的 一 个 选项 下 。 下 拉 菜 单 是 导航 条 的 重要 部 分 。 想 要 实现 多 浏览 器 兼容 的 下 拉 菜 单 并 


不 容易 ， 需 要 用 div+CSS+JavaScript 来 实现 。 本 节 将 讲述 两 种 下 拉 菜 和 
是 横向 的 下 拉 菜 单 ， 一 种 是 纵向 的 下 拉 菜 单 。 


20.2.1 制作 横向 下 拉 菜 单 


的 制作 方法 ， 一 种 


横向 下 拉 菜 单 是 指 横向 导航 条 下 的 下 级 菜单 ， 一 般 会 有 二 级 和 三 级 的 菜单 。 本 小 节 将 


会 介绍 二 级 下 拉 菜 单 的 两 种 显示 效果 和 三 级 下 拉 菜 单 的 显示 效果 。 


【示例 20.6】 下 面 是 使 用 下 拉 菜 单 纵向 放置 来 显示 页 面 的 具体 效果 。 示 例 使 用 的 是 外 
部 样式 表 ， 放 在 css 文件 夹 里 , 命名 为 20.6.css。 这 里 将 分 别 给 出 CSS 文件 和 页 面 文件 的 代 


码 ， 代 码 如 下 。 


CSS 文件 代码 : 

#NavList, #NavList ul{list-style-type:none;} 
#NavList li{display:block; float:left;} 
#NavList li a#one 


display:block; /* 设 置 图 片 显示 位 置 */ 
background:url (../images/20.1.jpg) no-repeat; /* 定 义 背 景 图 片 x*/ 
width:90px; 

height:27px; 


;| 

#NavList 1i a#one:hover{background:url(../images/20.1.jpg) no-repeat;} 
/* 定 义 鼠 标 经 过 显示 背景 图 片 */ 

#NavList 1i a#two 


display:block; /* 设 置 图 片 显示 位 置 */ 
background:url(../images/20.2.jpg) no-repeat; /* 定 义 背景 图 片 */ 
width:90px; 

height:27px; 


} 

#NavList 1i a#two:hover{background:url(../images/20.2.jpg) no-repeat;} 
/* 定 义 鼠 标 经 过 显示 背景 图 片 */ 

#NavList 1i a#three 

{ 


display:block; /* 设 置 图 片 显示 位 置 */ 
background:url(../images/20.3.jpg) no-repeat; /* 定 义 背 景 图 片 */ 
width:90px; 
height:27px; 
} 
#NavList 1i a#three:hover{background:url(../images/20.3.jpg) no-repeat;} 
/* 定 义 鼠 标 经 过 显示 背景 图 片 */ 
#NavList 1i a#four 
{ 
display:block; /* 设 置 图 片 显示 位 置 */ 


background:url(../images/20.5.jpg) no-repeat; /* 定 义 背 景 图 片 */ 
width:90px; 
height:27px; 
} 
#NavList li a#four:hover{background:url(../images/20.5.jpg) no-repeat;} 
/* 定 义 鼠 标 经 过 显示 背景 图 片 */ 
#NavList 1i ul{list-style-type:none; width:80px; display:none; position: 
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absolute; margin:0; padding:0;} 
#NavList 1i ul li{width:80px;} 
#NavList li ul a{fdisplay:block;} 
#NavList 1i ul a#two one 
. 
width:90px; 
height:27px; 
border-bottom:1px solid #333333; 
background-image:url(../images/20.2 1.jpg); 
} 
#NavList 1i a#two one:hover{background-image:url(../images/20.2 11.jpg);} 
/* 定 义 鼠 标 经 过 显示 下 拉 菜 单 背景 图 片 */ 
#NavList 1i ul a#two two 
{ 
width:90px; 
height:27px; 
border-bottom:1px solid #333333; 
background-image:url(../images/20.2 2.jpg); 
} 
#NavList 1i a#two two:hover{background-image:url(../images/20.2 12.jpg);} 
/* 定 义 鼠 标 经 过 显示 下 拉 菜 单 背 景 图 片 */ 
#NavList 1i ul a#two three 
{ 
width:90px; 
height:27px; 
border-bottom:1lpx solid #333333; 
background-image:url(../images/20.2 3.jpg); 
} 
#NavList 1i a#two three:hover{background-image:url(../images/20.2 13.jpg);} 
/# 定 义 鼠 标 经 过 显示 下 拉 菜 单 背景 图 片 */ 
#NavList 11:hover ul{display:inline;} /* 定 义 鼠 标 经 过 时 弹出 下 拉 菜 单 */ 
#NavList 1i.sfhover ul{display:inline;} /* 定 义 鼠标 经 过 时 弹出 下 拉 菜 单 */ 


在 CSS 文件 中 , 只 是 在 之 前 导航 条 的 基础 上 加 了 下 拉 菜 单 的 样式 , 还 有 最 后 的 两 个 定 
义 , 最 后 的 两 个 定义 是 非常 重要 的 ， 用 来 设置 弹出 下 拉 菜 单 的 显示 , 没有 了 最 后 两 个 属性 ， 
就 无 法 实现 下 拉 菜 单 的 效果 。 

页 面 文件 代码 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www 

.W3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.0org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 示 例 20.6</title> 

<link href="css/20.6.css" rel="stylesheet" type="text/css" /> 


<!-- 调用 外 部 样式 表 --> 


</head> 
<body> 
<div class="navFrame"> 
<ul id="NavList"> < 本 从 列表 天 类 > 


<li><a href=".." id="one"></a></1i> 
<li><a href=".." id="two"></a> 
<ul> <!-- 插入 嵌 套 列表 开始 --> 
<li><a href id="two one"></a></1i> 
<li><a href id="two two"></a></1i> 
<li><a href= id="two three"></a></1i> 
</ul> <!-- 插入 嵌 套 列表 结束 --> 


< 
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<li><a href=".." id="three"></a></1i> 
<li><a href=".." id="four"></a></1i> 


</ul> <!-- 插入 列表 结束 --> 

</div> 
</body> 
</html> 
效果 如 图 20.6 所 示 。 

i Ee 

E77 
© HO fle///F/bYy/FG20/20.6 html 立 A| 


图 20.6 ”使 用 下 拉 菜 单 纵 向 放置 显示 页 面 效果 图 


【示例 20.7】 下 面 是 使 用 下 拉 菜单 横向 放置 来 显示 页 面 的 效果 。 示 例 使 用 的 是 外 部 样 
式 表 ， 放 在 css 文件 夹 里 ， 命 名 为 20.6.css。 这 里 将 分 别 给 出 CSS 文件 和 页 面 文件 的 代码 ， 
代码 如 下 。 

CSS 文件 代码 : 

#NavList, #NavList ul{list-style-type:none;} 

#NavList li{display:block; float:left;} 


#NavList li a#one 


f 


display:block; /* 设 置 图 片 显示 位 置 */ 
background:url(../images/20.1.jpg) no-repeat; /* 定 义 背景 图 片 */ 
width:90px; 

height:27px; 


» 
#NavList 1i a#one:hover{background:url(../images/20.1.jpg) no-repeat;} 


/* 定 义 鼠 标 经 过 显示 背景 图 片 */ 
#NavList 1i a#two 
{ 


display:block; /* 设 置 图 片 显示 位 置 */ 
background:url(../images/20.2.jpg) no-repeat; /* 定 义 背景 图 片 */ 
width:90px; 

height:27px; 


#NavList li a#two:hover{background:url(../images/20.2.jpg) no-repeat;} 
/* 定 义 鼠 标 经 过 显示 背景 图 片 */ 

#NavList 1i a#three 

{ 
display:block; /* 设 置 图 片 显示 位 置 */ 
background:url(../images/20.3.jpg) no-repeat; /* 定 义 背景 图 片 */ 
width:90px; 
height:27px; 

} 

#NavList li a#three:hover{background:url(../images/20.3.jpg) no-repeat;} 

/* 定 义 鼠 标 经 过 显示 背景 图 片 */ 

#NavList 1i a#four 

| 
display:block; /* 设 置 图 片 显 示 位 置 */ 
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background:url(../images/20.5.jpg) no-repeat; /* 定 义 背 景 图 片 */ 
width:90px; 
height:27px; 
} 
#NavList 1i a#four:hover{background:url(../images/20.5.jpg) no-repeat;} 
/* 定 义 鼠 标 经 过 显示 背景 图 片 */ 
#NavList 1i ul{list-style-type:none; width:250px; display:none; position: 
absolute; margin:0; padding:0;} 
#NavList 1i ul li{width:80px;} 
#NavList Li ul a{display:block;} 
#NavList 1i ul a#two one 
{ 
width:90px; 
height:20px; 
border-bottom:1px solid #333333; 
background-image:url(../images/20.2 1.jpg); 
} 
#NavList 1i a#two one:hover{width:90px; height:20px; background-image: 
url(../images/20.2 11.jpg);} /* 定 义 鼠标 经 过 显示 下 拉 菜 单 背 景 图 片 */ 
#NavList 1i ul a#two two 
{ 
width:90px; 
height:20px; 
border-bottom:1lpx solid #333333; 
background-image:url(../images/20.2 2.jpg); 
} 
#NavList li a#two two:hover{width:90px; height:20px; background-image: 
url(../images/20.2 12.jpg);} /* 定 义 鼠 标 经 过 显示 下 拉 菜 单 背 景 图 片 */ 
#NavList 1i ul a#two three 
{ 
width:90px; 
height:20px; 
border-bottom:1lpx solid #333333; 
background-image:url(../images/20.2 3.jpg); 
} 
#NavList 1i a#two three:hover{width:90px; height:20px; background-image: 
url(../images/20.2 13.jpg);} /* 定 义 鼠 标 经 过 显示 下 拉 菜 单 背景 图 片 */ 
#NavList li:hover ul{display:inline;} /* 定 义 鼠 标 经 过 时 弹出 下 拉 菜 单 */ 
#NavList 1i.sfhover ul{display:inline;} /* 定 义 鼠 标 经 过 时 弹出 下 拉 菜 单 */ 


由 于 示例 20.7 和 示例 20.6 的 CSS 文件 几乎 是 一 样 的 ， 只 需要 增加 二 和 刀 里 面 的 宽度 
便 可 以 把 下 拉 菜 单 变 成 横向 菜单 ， 所 以 这 里 就 把 选择 器 里 的 属性 全 部 缩放 在 一 行 ， 具 体格 
式 参 照 示例 20.6 就 可 以 了 。 

页 面 文件 代码 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 

WWW.Ww3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.0org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 示 例 20.7</title> 


<link href="../css/20.7.css" rel="stylesheet" type="text/css" /> 
<!-- 调用 外 部 样式 表 --> 


</head> 
<body> 
<div class="navFrame"> 
<ul id="NavList"> <!-- 插入 列表 开始 --> 


<li><a href="..." id="one"></a></1i> 
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<li><a href="..." id="two"></a> 
<ul> <!-- 插入 嵌 套 列表 开始 --> 
<li><a href="..." id="two one"></a></1i> 
<li><a href= ." id="two two"></a></1i> 
<li><a href="..." id="two three"></a></1i> 
</ul> <!-- 插入 嵌 套 列表 结束 --> 
</Ei> 
<li><a href="..." id="three"></a></1i> 
<li><a href="..." id="four"></a></1i> 


</ul> <!-- 插入 列表 结束 --> 
</div> 
</body> 
</html> 
效果 如 图 20.7 所 示 。 
[Ga 


示 820.7 < 局 时 


=- 人 辣 C 省 | @file///FVbj/ 示 例 /第 20 章 /20.7.html 家 | 入 


人 iey/FVb/ 示 钢 / 筷 20 章 /207 htmls | 
图 20.7 使 用 下 拉 菜 单 横向 放置 显示 页 面 效 果 图 


【示例 20.8】 下 面 是 使 用 三 级 下 拉 菜单 纵向 放置 的 效果 。 示 例 使 用 的 是 外 部 样式 表 ， 
放 在 css 文件 夹 里 ， 命 名 为 20.8.css。 这 里 将 分 别 给 出 CSS 文件 和 页 面 文件 的 代码 ， 代 码 
如 下 。 

CSS 文件 代码 : 


@charset "utf-8"; 

/*CSS Document*/ 

#NavList,#NavList ul{list-style-type:none;} 

#NavList li{display:block; float:left;} 

#NavList 1i a#one{display:block; background:url(../images/20.1.jpg) no- 

repeat; width:90px; height:27px; } 

#NavList 1i a#one:hover{background:url(../images/20.1.1.jpg) no-repeat;} 

/* 定 义 鼠 标 经 过 显示 背景 图 片 */ 

#NavList 1i a#two{display:block; background:url(../images/20.2.jpg) no- 

repeat; width:90px; height:27px; } 

#NavList 1i a#two:hover{background:url(../images/20.2.1.jpg) no-repeat;} 

/* 定 义 鼠 标 经 过 显示 背景 图 片 */ 

#NavList li a#three{display:block; background:url(../images/20.3.jpg) no- 

repeat; width:90px; height:27px; } 

#NavList 1i a#three:hover{background:url(../images/20.3.1.jpg) no-repeat;} 
/* 定 义 鼠标 经 过 显示 背景 图 片 */ 

#NavList 1i a#four{display:block; background:url(../images/20.5.jpg) no- 

repeat; width:90px; height:27px; } 

#NavList 1i a#four:hover{background:url(../images/20.4.1.jpg) no-repeat;} 
/* 定 义 鼠 标 经 过 显示 背景 图 片 */ 

#NavList 1i ul{list-style-type:none; width:80px; display:none; Position: 

absolute; margin:0; padding:0;} 
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#NavList 1i ul li{width:80px;} 

#NavList li ul a{display:block;} 

#NavList li ul a#two one{width:90px; height:27px; background-image: 
url(../images/20.2 1.jpg);} 

#NavList li a#two one:hover{background-image:url(../images/20.2 1.jpg);} 
#NavList 1i ul a#two two{width:90px; height:27px; background-image: 
url(../images/20.2 2.jpg);} 

#NavList li a#two two:hover{background-image:url(../images/20.2 2.jpg);} 
#NavList li ul a#two three{width:90px; height:27px;background-image:url 
(../images/20.2 3.jpg);} 

#NavList 1i a#two three:hover{background-image:url(../images/20.2 3.jpg);} 
#NavList li:hover ul{display:inline;} /# 定 义 鼠 标 经 过 时 弹出 下 拉 菜 单 */ 
#NavList li.sfhover ul{display:inline;} /* 定 义 鼠标 经 过 时 弹出 下 拉 菜 单 */ 
#NavList li:hover ul li ul{list-style-type:none; width:90px; display:none; 
position:absolute; margin:0; padding:0; margin-left:90px; margin-top: 
-19px;} 
#NavList li:hover ul li ul li{width:80px;} 

#NavList li:hover ul li ul a{display:block;} 

#NavList li:hover ul li ul a#two two one{width:80px; height:19px; 
background-image:url(../images/20.2 111.jpg);} 

#NavList li:hover ul li a#two two one:hover{background-image:url 
(../images/20.2 1111.jpg);} 

#NavList li:hover ul li ul a#two two two{width:80px; height:19px; 
background-image:url(../images/20.2 112.jpg);} 

#NavList li:hover ul li a#two two two:hover{background-image:url 
(../images/20.2 1112.jpg);} 

#NavList li:hover ul li ul a#two two three{width:80px; height:19px; 
background-image:url(../images/20.2 113.jpg);} 

#NavList li:hover ul li a#two two three:hover{background-image:ur 
(../images/20.2 1113.jpg);} 

#NavList li:hover ul li:hover ul{display:block; position:absolute;} 


/* 定 义 鼠 标 经 过 时 弹出 下 拉 菜 单 */ 


全 说 了 明 : 由 于 属性 过 多 的 关系 ， 这 里 把 选择 器 里 的 属性 都 放 在 一 起 了 ， 可 能 看 起 来 会 比较 
密集 了 一 点 ， 但 是 ， 只 要 用 Dreamweaver 再 看 一 下 便 可 以 清晰 明白 。 上 半 部 分 都 
是 使 用 前 面 二 级 菜单 的 代码 ， 只 是 后 来 添加 了 三 级 菜单 的 部 分 。 


页 面 文件 代码 ; 


<!DOCTYPE html] PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www 
.W3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
<html xmlns="http://www.w3.0org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 20.8</title> 
<link href="../css/20.8.css" rel="stylesheet" type="text/css" /> 
<!-- 调用 外 部 样式 表 --> 


<script language="javascript" src="scripts/menu.javascript" type="text/ 


javascript"></script> <!-- 调用 JavaScript 程序 --> 
</head> 
<body> 
<div class="navFrame"> 
<ul id="NavList"> <!-- 插入 列表 开始 --> 


<li><a href="..." id="one"></a></]1i> 
<li><a href="..." id="two"></a> 
<ul> <!-- 插入 第 一 层 嵌 套 列表 开始 --> 
<li><a href=" "two_ one"></a></1i> 
<li><a href= "two_ two"></a> 
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<ul> <!-- 插入 第 二 层 列表 开始 --> 
<li><a href="..." id="two two one"></a></1i> 
<li><a href="..." id="two two two"></a></1i> 
<li><a href="..." id="two two three"></a></1i> 


</ul> <!-- 插入 第 二 层 列表 结束 --> 
关门 二 > 
<li><a href="..." id="two three"></a></]1i> 
</ul> <!-- 插入 第 一 层 嵌 套 列表 结束 --> 


</1i> 
<li><a href="..." id="three"></a></1i> 
<li><a href="..." id="four"></a></1i> 


</ul> <!-- 插入 列表 结束 --> 
</div> 
</body> 
</html> 
效果 如 图 20.8 所 示 。 
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图 20.8 使 用 三 级 下 拉 菜 单 纵向 放置 效果 图 


20.2.2 制作 纵向 下 拉 菜 单 


纵向 下 拉 菜 单 是 指 纵向 导航 条 下 的 下 级 菜单 ， 一 般 会 有 二 级 和 三 级 的 菜单 。 本 小 节 将 
会 介绍 二 级 下 拉 菜 单 显示 效果 和 三 级 下 拉 菜 单 的 显示 效果 。 

【示例 20.9】 下 面 是 使 用 下 拉 菜 单 纵向 放置 来 显示 页 面 的 效果 。 示 例 使 用 的 是 外 部 样 
式 表 ， 放 在 css 文件 夹 里 ， 命 名 为 20.9.css。 这 里 将 分 别 给 出 CSS 文件 和 页 面 文件 的 代码 ， 
代码 如 下 。 

CSS 文件 代码 : 

#NavList, #NavList ul{list-style-type:none; width:90px;} 


#NavList li{display:block; float:left;} 
#NavList 1i a#one 


{ 
display:block; /* 设 置 图 片 显示 位 置 */ 
background:url(../images/20.1.jpg) no-repeat; /* 定 义 背景 图 片 */ 
border-bottom:1lpx solid #CCCCCC; 
width:90px; 
height:27px; 


#NavList li a#one:hover{background:url(../images/20.1.1.jpg) no-repeat;} 
/* 定 义 鼠 标 经 过 显示 背景 图 片 */ 
#NavList li a#two 
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display:block; /* 设 置 图 片 显示 位 置 */ 
background:url(../images/20.2.jpg) no-repeat; /* 定 义 背 景 图 片 */ 
border-bottom:1px solid #CCCCCC; 
width:90px; 
height:27px; 
} 
#NavList li a#two:hover{background:url(../images/20.2.1.jpg) no-repeat;} 
/* 定 义 鼠 标 经 过 显示 背景 图 片 */ 
#NavList 1i a#three 
{ 
display:block; /* 设 置 图 片 显示 位 置 */ 
background:url(../images/20.3.jpg) no-repeat; /* 定 义 背景 图 片 */ 
border-bottom:1px solid #CCCCCC; 
width:90px; 
height:27px; 
于 
#NavList 1i a#three:hover{background:url(../images/20.3.1.jpg) no-repeat;} 
/* 定 义 鼠 标 经 过 显示 背景 图 片 */ 
#NavList 1i a#four 
{ 
display:block; /* 设 置 图 片 显示 位 置 */ 
background:url(../images/20.5.jpg) no-repeat; /* 定 义 背 景 图 片 */ 
border-bottom:1lpx solid #CCCCCC; 
width:90px; 
height:27px; 
} 
#NavList 1i a#four:hover{background:url(../images/20.4.1.jpg) no-repeat;} 
/* 定 义 鼠 标 经 过 显示 背景 图 片 */ 
#NavList 1i ul{list-style-type:none; width:90px; display:none; position: 
absolute; margin:0; padding:0; margin-left:90px; margin-top:-27px;} 
#NavList li ul li{width:90px;} 
#NavList 1i ul a{display:block;} 
#NavList li ul a#two one 
{ 


width:90px; 
height:27px; 
background-image:url(../images/20.2 1.jpg); 
} 
#NavList 1i a#two one:hover{background-image:url(../images/20.2 11.jpg);} 
#NavList 1i ul a#two two 
{ 
width:90px; 
height:27px; 
border-bottom:1lpx solid #333333; 
background-image:url(../images/20.2 2.jpg); 
, 
#NavList 1i a#two two:hover{background-image:url(../images/20.2 12.jpg);} 
#NavList 1i ul a#two three 
‘ 
width:90px; 
height:27px; 
border-bottom:1px solid #333333; 
background-image:url(../images/20.2 3.jpg); 
: 
#NavList li a#two three:hover{background-image:url(../images/20.2 13.jpg);} 
#NavList li:hover ul{display:inline;} /* 定 义 鼠 标 经 过 时 弹出 下 拉 菜 单 */ 
#NavList 1i.sfhover ul{display:inline;} /* 定 义 鼠 标 经 过 时 弹出 下 拉 菜 单 */ 
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全 说 明 : 在 CSS 文 件 中 , 可 以 看 到 , 设置 纵向 菜单 的 样式 和 设置 二 级 菜单 下 的 样式 差不多 


一 样 。 而 页 面 文件 代码 则 和 横向 菜单 的 代码 一 样 ， 从 这 里 就 可 以 看 到 CSS+ 语 义 
标记 代码 的 可 用 性 有 多 强 了 。 


页 面 文件 代码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 
Www.w3.org/TR/xhtml1/DTD/xhtmll-transitional .dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 20.9</title> 
<link href="../css/20.9.css" rel="stylesheet" type="text/css" /> 
<!-- 调用 外 部 样式 表 --> 
</head> 
<body> 
<div class="navFrame"> 
<ul id="NavList"> <!-- 插入 列表 开始 --> 
<li><a href="..." id="one"></a></1i> 
<li><a href="..." id="two"></a> 
<ul> <!-- 插入 嵌 套 列表 开始 --> 
<li><a href="..." id="two one"></a></1i> 
<li><a href="..." id="two two"></a></1i> 
<li><a href="..." id="two _ three"></a></1i> 
</ul> <!-- 插入 展 套 列表 结束 --> 
</1i> 
<1i><a href="..." id="three"></a></1i> 
<li><a href="..." id="four"></a></1i> 


SS <!-- 插入 列表 结束 --> 
</div> 
</body> 
</html> 
效果 如 图 20.9 所 示 。 
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图 20.9 使 用 下 拉 菜 单 纵 向 放置 显示 页 面 效 果 图 


【示例 20.10】 下 面 是 使 用 三 级 下 拉 菜 单 纵 向 放置 的 效果 。 示 例 使 用 的 是 外 部 样式 表 ， 


放 在 css 文件 夹 里 ， 命 名 为 20.10.css。 这 里 将 分 别 给 出 CSS 文件 和 页 面 文件 的 代码 ， 代 码 
如 下 。 


CSS 文件 代码 : 


i 


第 3 篇 ”网 站 开发 实例 


@charset "utf-8"7 
/*CSS Document*/ 
#NavList, #NavList ul{list-style-type:none; width:90px;} 
#NavList li{display:block; float:left;} 
#NavList li a#one{display:block; background:url(../images/20.1.jpg) 
no-repeat; width:90px; height:27px; } 
#NavList 1i a#one:hover{background:url(../images/20.1.1.jpg) no-repeat;} 
/* 定 义 鼠 标 经 过 显示 背景 图 片 */ 
#NavList li a#two{fdisplay:block; background:url(../images/20.2.jpg) 
no-repeat; width:90px; height:27px; } 
#NavList li a#two:hover{background:url(../images/20.2.1.jpg) no-repeat;} 
/* 定 义 鼠 标 经 过 显示 背景 图 片 */ 
#NavList li a#three{display:block; background:url(../images/20.3.jpg) 
no-repeat; width:90px; height:27px; } 
#NavList 1i a#three:hover{background:url(../images/20.3.1.jpg) no-repeat;} 
/* 定 义 鼠 标 经 过 显示 背景 图 片 */ 
#NavList li a#four{display:block; background:url(../images/20.5.jpg) 
no-repeat; width:90px; height:27px; } 
#NavList 1i a#four:hover{background:url(../images/20.4.1.jpg) no-repeat;} 
/*# 定 义 鼠 标 经 过 显示 背景 图 片 */ 
#NavList 1i ul{list-style-type:none; width:90px; display:none; position: 
absolute; margin:0; padding:0; margin-left:90px; margin-top:-27px;} 
#NavList 1i ul li{width:90px;} 
#NavList 1i ul a{display:block;} 
#NavList 1i ul a#two one{width:90px; height:27px; background-image:url 
(../images/20.2 1.jpg);} 
#NavList 1i a#two one:hover{background-image:url(../images/20.2 11.jpg);} 
#NavList 1i ul a#two two{width:90px; height:27px; background-image:url 
(../images/20.2 2.jpg);} 
#NavList 1i a#two two:hover{background-image:url(../images/20.2 12.jpg);} 
#NavList 1i ul a#two three{width:90px; height:27px; background-image:url 
(../images/20.2 3.jpg);} 
#NavList 1i a#two three:hover{background-image:url(../images/20.2 13.jpg);} 
#NavList li:hover ul{display:inline;} /* 定 义 鼠标 经 过 时 弹出 下 拉 菜 单 */ 
#NavList li.sfhover ul{display:inline;} /* 定 义 鼠标 经 过 时 弹出 下 拉 菜 单 */ 
#NavList li:hover ul li ul{list-style-type:none; width:80px; display:none; 
position:absolute; margin:0; padding:0; margin-left:90px; margin-top: 
-19px;} 
#NavList li:hover ul li ul li{width:80px;} 
#NavList li:hover ul li ul a{display:block;} 
#NavList 1i:hover ul li ul a#two two one{width:80px; height:19px; 
background-image:url (../images/20.2 111.jpg);} 
#NavList li:hover ul li a#two two one:hover{background-image:url 
(../images/20.2 1111.jpg);} 
#NavList li:hover ul li ul a#two two two{width:80px; height:19px; 
background-image:url(../images/20.2 112.jpg);} 
#NavList li:hover ul li a#two two two:hover{background-image:url(../images 
W202 T1120 19) 
#NavList li:hover ul li ul a#two two three{width:80px; height:19px; 
background-image:url(../images/20.2 113.jpg);} 
#NavList li:hover ul li a#two two three:hover{background-image:url 
(../images/20.2 1113.jpg);} 
#NavList li:hover ul li:hover ul{display:block; position:absolute;} 
/*# 定 义 鼠 标 经 过 时 弹出 下 拉 菜 单 */ 


页 面 文件 代码 : 
<!DOCTYPE html PUBLIC "-//W3C/V/DTD XHTML 1.0 Transitional//EN" “http://www 


-W3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
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<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 20.10</title> 

<link href="../css/20.10.css" rel="stylesheet" type="text/css" /> 


<!-- 调用 外 部 样式 表 --> 


</head> 
<body> 
<div class="navFrame"> 
<ul id="NavList"> <!-- 插入 列表 开始 --> 


<li><a href="..." id="one"></a></1i> 
<li><a href="..." id="two"></a> 
<ul> <!-- 插入 第 一 层 嵌 套 列 表 开始 --> 
<1i><a href="..." id="two one"></a></1i> 
<li><a href="..." id="two two"></a> 
<ul> <!-- 插入 第 二 层 列表 开始 --> 
<li><a href="..." id="two two one"></a></1i> 
<li><a href="..." id="two two two"></a></1i> 
<1i><a href="..." id="two | ) two ) three"></a></1i> 


</ul> <!-- 插入 第 二 层 列表 结束 --> 
</1i> 
<li><a href="..." id="two _ three"></a></1i> 
</ul> <!-- 插入 第 一 层 嵌 套 列 表 结 束 --> 


< 
<li><a href="..." id="three"></a></1i> 
<li><a href="..." id="four"></a></1i> 


</ul> <!-- 插入 列表 结束 --> 
</div> 
</body> 
</html> 
效果 如 图 20.10 所 示 。 
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图 20.10 ”使 用 三 级 下 拉 菜 单 纵 向 放置 效果 图 


全 说明 : 示例 中 ， 当 鼠标 放 在 “鲜花 展示 2” 时 弹出 三 级 下 拉 菜 单 ， 当 鼠标 放 在 三 级 下 拉 
菜单 上 ， 图 片 会 变 成 其 他 颜色 ， 如 图 20.10 所 示 。 


20.3 CSS 制作 小 三 角形 菜 


` 三 角形 显示 的 菜单 ， 是 指 不 使 用 图 片 , 而 是 使 用 CSS 制作 出 小 三 角形 的 箭头 来 作为 


i 
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菜 


的 图 标 。 本 节 将 举例 说 明 这 种 菜单 的 制作 方法 。 
【示例 20.11】 下 面 是 使 用 CSS 制作 小 三 角形 菜单 的 效果 。 示 例 使 用 的 是 外 部 样式 表 ， 


放 在 css 文件 夹 里 ， 命 名 为 20.11.css。 这 里 将 分 别 给 出 CSS 文件 和 页 面 文件 的 代码 ， 代 码 
如 下 。 


CSS 文件 代码 : 


@charset "utf-8"; 
/*CSS Document*/ 
* 
margin:0; 
padding:0; 
font-size:12px; 
font-family:Verdana，" 宋 体 "，Rrial; 
line-height:24px; 
list-style:none; 
} 
#nav 
{ 
margin:50px; /* 设 置 外 边 距 */ 
border:1lpx dashed #F00; /* 设 置 边 框 */ 
background:url(../images/20.6.jpg) no-repeat; /* 设 置 背 景 图 片 */ 
padding:50px; /* 设 置 内 边 距 */ 
} 
a:link,a:visited{color:#36F; text-decoration: none;} /* 设 置 菜单 颜色 */ 
a:hover,a:active{ color:#F00;} /* 设 置 鼠标 经 过 时 菜单 颜色 */ 
#nav a span /* 制 作 三 角形 图 标 */ 
{ 
overflow:hidden; 
border-top:6px solid #BFF2FF; 
border-left:6px solid #BFF2FF; 
border-bottom: 6px solid #BFF2FF; 
height:0px; width:0px; 
margin:2px 2px 0 -10px; 
position:absolute 
#nav a:hover span /* 制 作 鼠 标 经 过 后 三 角形 图 标 */ 
{ 


border-top:6px solid #BFF2FF; 
border-left:6px solid #FF3300; 
border-bottom: 6px solid #BFF2FF; 
overflow:hidden; 
float:left; 
} 
这 是 使 用 CSS 制作 出 来 的 三 角形 图 标 ， 简 洁 而 且 可 以 根据 需要 更 改 颜色 和 大 小 。 
页 面 文件 代码 : 
<!DOCTYPE html] PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www 
-W3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 20.11</title> 
<link href="../css/20.11.css" rel="stylesheet" type="text/css" /> 


<!-- 调用 外 部 样式 表 --> 
</head> 


ns 
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<body> 
<div id="nav"> 


<h1> 使 用 css 制作 小 三 角形 菜单 </h1> 


<ul> 


关于 我 们 </a></1i> 


<!-- 插入 列表 --> 


<li><a href="..." fcksavedurl="..." target=" blank"><span></span> 


<li><a href="..." fcksavedurl="..." target=" blank"><span></span> 


鲜花 展示 </a></1i> 


<li><a href="..." fcksavedurl="..." target=" blank"><span></span> 


留言 版 </a></1i> 


<li><a href="..." fcksavedurl="..." target=" blank"><span></span> 


联系 我 们 </a></1i> 
</ul> 
</div> 
</body> 
</html> 


效果 如 图 20.11 所 示 。 


技巧 : 此 菜单 效果 ， 适 合用 来 做 下 级 菜单 的 


效果 。 


下 面 将 提供 几 种 不 同方 向 的 小 三 角形 的 制作 


方法 ， 供 以 后 制作 网 站 使 用 。 


【示例 20.12】 下 面 是 使 用 CSS 制作 不 同 的 小 


角形 具体 效果 。 示 例 使 用 的 是 外 部 样式 表 ， 放 


在 css 文件 夹 里， 命名 为 20.12.css。 这 里 将 分 别 


给 出 CSS 文件 和 页 面 文件 的 代码 ， 代 码 如 下 。 


CSS 文件 代码 : 


一 一 本 一 
© 看 Ofile//F/bY/FM/ 208/20.1Lhtml 和 
使 用 CSS 制 作 少 三 角形 畦 单 
关于 我 们 
I 
sng 
mtr 
图 20.11 使 用 CSS 制作 小 三 角形 菜单 效果 图 


*{ margin:0; padding:0; font-size:12px; font-family:Verdana, "宋体 "，, Arial; 
line-height:1.8; list-style:none;} 


#info,#nav 
{ 
margin:50px; 
border:1lpx dashed #FF3300; 


background:url(../images/20.6.jpg) no-repeat; 


padding:50px; 

J 

#info div 

{ 
background:#FF0000; 
width:0px; 
height:0px; 
overflow:hidden; 
margin-bottom:10px; 


/* 不 同方 向 三 角形 的 制作 */ 
#com a 


四 


border-top:10px solid #BFF2FF; 
border-left:10px solid #FF3300; 
border-bottom:10px solid #BFF2FF; 


和 


#com b 


/* 设 置 边 框 */ 
/* 设 置 背 景 图 片 */ 


/* 设 置 背景 颜色 */ 


/* 设 置 上 边框 */ 
/* 设 置 左边 框 */ 
/* 设 置 下 边框 */ 


Ts 
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border-top:10px solid #BFF2FF; /* 设 置 上 边框 */ 
border-right:10px solid #FF3300; /* 设 置 右边 框 */ 
border-bottom:10px solid #BFF2FF; /* 设 置 下 边框 */ 

到 

#com c 

. 
border-top:10px solid #BFF2FF; /* 设 置 上 边框 #/ 
border-right:10px solid #FF3300; /* 设 置 右边 框 */ 
border-bottom:10px solid #BFF2FF; /* 设 置 下 边框 */ 
border-left:10px solid #FF3300; /* 设 置 左边 框 #/ 

3 

#com d 

' 
border-top:10px solid #FF3300; /* 设 置 上 边框 */ 
border-right:10px solid #BFF2FF; /* 设 置 右边 框 */ 
border-bottom:10px solid #FF3300; /* 设 置 下 边框 */ 
border-left:10px solid #BFF2FF; /* 设 置 左边 框 */ 

3 

#com e 

{ 
border-top:10px solid #BFF2FF; /* 设 置 上 边框 */ 
border-left:10px solid #FF3300; /* 设 置 左 边框 */ 

} 

#com f£ 

{ 
border-top:10px solid #FF3300; /* 设 置 上 边框 */ 
border-right:10px solid #BFF2FF; /* 设 置 右边 框 */ 
border-left:10px solid #BFF2FF; /* 设 置 左边 框 */ 

. 

#com g 

{ 
border-right:10px solid #BFF2FF; /* 设 置 右边 框 */ 
border-bottom:10px solid #FF3300; /* 设 置 下 边框 */ 
border-left:10px solid #BFF2FF; /* 设 置 左边 框 */ 

} 

#com h 

{ 
border-top:10px solid #FF3300; /* 设 置 上 边框 */ 
border-bottom:10px solid #FF3300; /* 设 置 下 边框 */ 
border-left:10px solid #BFF2FF; /* 设 置 左边 框 */ 

#com i 

i 
border-top:10px solid #FF3300; /* 设 置 上 边框 */ 
border-right:10px solid #FF3300; /* 设 置 右边 框 */ 
border-bottom:10px solid #FF3300; /* 设 置 下 边框 */ 
border-left:10px solid #BFF2FF; /* 设 置 左 边框 */ 


i 
名 说明: CSS 文件 中 ,每 个 选择 器 里 都 设置 了 不 同 的 三 角形 符号 ,符号 可 以 自己 调整 大 小 


和 颜色 。 
页 面 文件 代码 : 


人 
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<!DOCTYPE htm] PUBLIC "-//W3C//DTD XHTML 1-0 Transitional//EN" "http://www 
-W3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 20.12</title> 
<link href="css/20.12.css" rel="stylesheet" type="text/css" /> <!-— 
调用 外 部 样式 表 --> 
</head> 
<body> 
<div id="info"> 
<h1> 不 同方 向 的 三 角形 的 制作 </h1> 
<div id="com a"></div> 
<div id="com b"></div> 
<div id="com f"></div> 
<div id="com g"></div> 
<div id="com c"></div> 
<div id="com d"></div> 
<div id="com e"></div> 
<div id="com h"></div> 
<div id="com i"></div> 
</div> 
</body> 
</html> 


效果 如 图 20.12 所 示 。 


| 
Os = 
CT 


网 方 交 三 角形 的 制作 


EE 


MMXP4a™ 


图 20.12 ”使 用 CSS 制作 不 同 的 小 三 角形 效果 图 


20.4 制作 居中 效果 


在 table 标签 里 ， 使 用 属性 align 就 可 以 制作 一 个 居中 效果 。 但 是 在 div 里 ， 居 中 往往 
不 是 那么 简单 的 事情 。 本 节 将 介绍 两 种 居中 方式 ， 一 种 是 水 平 居中 ， 一 种 是 垂直 居中 。 


20.4.1 制作 div 水 平 居中 


在 前 面 制作 的 博客 中 提 到 过 div 的 水 平 居 中 。 在 实际 应 用 中 ，div 的 水 平 居中 是 应 用 非 
常 广 的 。 本 小 节 将 使 用 一 个 十 字 架 的 制作 来 体现 div 的 水 平 居中 。 


二 3 
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【示例 20.13】 下 面 是 使 用 div 制作 水 平 居 中 的 具体 效果 。 示 例 使 用 的 是 外 部 样式 表 ， 
放 在 css 文件 夹 里 ， 命 名 为 20.13.css。 这 里 将 分 别 给 出 CSS 文件 和 页 面 文件 的 代码 ， 代 码 
如 下 。 

CSS 文件 代码 : 


@charset "utf-8"; 

/*CSS Document*/ 

*{ margin:0 auto; padding:0; text-align:center;}  /* 设 置 水 平 居 中 */ 
.mainfram 


{ 


width:150px; 
height:150px; 

} 

.Czfram 

{ 
background-color:#F00; 
width:40px; 
height:150px; 

L 

.spfram 

{ 
background-color:#F00; 


width:150px; 

height:40px; 

float:inherit; /* 设 置 浮动 */ 

margin-top:-100px; /* 设 置 外 边 距 */ 
页 面 文件 代码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www 
.W3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
<htm1l xmlns="http://www.w3.o0rg/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 20.13</title> 
<link href="../css/20.13.css" rel="stylesheet" type="text/css" /> 
<!-- 调用 外 部 样式 表 --> 


</head> 
a . reo 
<div class="mainfram"> CC 胡 | 加 fey/F/bj/ 示 例 /第 20 守 /2013.html 家 | 入 


<div class="czfram"></div> 
<div class="spfram"></div> 
</div> 
</body> 
</html> 


效果 如 图 20.13 所 示 。 | 


全 说 明 : 示例 20.13 中 的 图 案 ， 可 以 根据 窗口 的 大 小 
自行 进行 居中 。 


图 20.13 使 用 div 制作 水 平 居中 效果 图 


20.4.2 制作 div 垂直 居中 


div 垂直 居中 比 div 水 平 居 中 要 难 控制 ， 本 小 节 举例 说 明 的 是 相对 垂直 居中 。 
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【示例 20.14】 下 面 是 使 用 div 制作 垂直 居中 的 具体 效果 。 示 例 使 用 的 是 外 部 样式 表 ， 
放 在 css 文件 夹 里 ， 命 名 为 20.14.css。 这 里 将 分 别 给 出 CSS 文件 和 页 面 文件 的 代码 ， 代 码 
如 下 。 

CSS 文件 代码 : 


@charset "utf-8"; 

/*CSS Document*/ 

*{ margin:0 auto; padding:0; text-align:center;} /* 设 置 居中 */ 
.mainfram 


{ 


width:150px; 
height:150px; 
position:absolute; 
top:50%; 
left:50%; 
margin:-100px 0 0 -100px; 

} 

.Czfram 

| 
background-color:#F00; 
width:50px; 
height:150px; 

} 

.spfram 

{ 
background-color:#F00; 


width:150px; 
height:50px; 
float:inherit; /* 设 置 浮动 */ 
margin-top:-100px; /* 设 置 外 边 距 */ 
} 
页 面 文件 代码 : 


<!DOCTYPE html] PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www 
.W3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.0org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 20.14</title> 

<link href="../css/20.14.css" rel="stylesheet" type="text/css" /> 


<!-- 调用 外 部 样式 表 --> 


</head> 

<body> i 

<div class="mainfram"> 子 G 级 加 人 ey//F/bj/ 示 网/ 第 20 宣 /20. 安 外 
<div class="czfram"></div> 
<div class="spfram"></div> 

</div> 

</body> 

</html> 


效果 如 图 20.14 所 示 。 


外 说 明 : 示例 20.14 中 的 图 案 , 可 以 根据 窗口 的 大 小 自 
行进 行 生 直 居 中 。 图 20.14 ”使 用 div 制作 垂直 居中 效果 图 
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20.5 制作 搜索 引擎 


使 用 CSS 可 以 制作 出 漂亮 的 搜索 引擎 ,是 用 CSS+JavaScript 放 在 页 面 里 的 。 本 小 节 就 


来 讲解 利用 图 片 来 制作 搜索 引擎 的 方法 。 


【示例 20.1S】 下 面 是 使 用 CSS+JavaScript 制作 漂亮 搜索 引擎 的 具体 效果 。 示 例 使 用 的 


是 外 部 样式 表 ， 放 在 css 文件 夹 里 ， 命 名 为 20.15.css。 这 是 


件 的 代码 ， 代 码 如 下 。 
CSS 文件 代码 : 
@charset "utf-8"; 
/*CSS Document*/ 
body 


font: normal 100% 


Color: #333; 


padding: 12px 0; 
margin: 0; 

font-size: .8em; 
line-height: 1.5; 


form 

| 
margin: 0; 

} 

#search box 

{ 
width: 175px; 
height: 54px; 


background: url(../images/20.81.jpg); 


} 

#search box #s 

{ 
float: left; 
padding: 0; 
margin: 18px 0 0 34px; 
border: 0; 
width: 134px; 
background: none; 
font-size: 1.1em; 


} 


#search box #go 
和 
float: right; 
margin: Opx -90px 0 0; 


页 面 文件 代码 : 


.342 。 


将 分 别 给 出 CSS 文件 和 页 面 文 


'Arial', 'Helvetica','Verdana', sans-serif; 


/* 设 置 字体 属性 */ 
/* 设 置 字体 颜色 */ 


/* 设 置 内 边 距 */ 
/* 设 置 外 边 距 */ 
/* 设 置 字体 大 小 */ 


/# 设 置 外 边 距 */ 


/* 设 置 背 景 图 片 */ 


/* 设 置 左 浮动 */ 
/* 设 置 内 边 距 */ 
/# 设 置 外 边 距 */ 


/* 设 置 右 浮动 */ 
/* 设 置 外 边 距 */ 
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<!DOCTYPE html] PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www 
-W3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<!-- JavaScript 程序 开始 --> 
<script language="javascript" type="text/javascript"> 
$ (function() { 
swapValues = []; 
$(".swap value") .each (function (i){ 
swapValues[i] = $ (this) .val(); 
$ (this) .focus (function(){ 
if ($(this) .val() == swapValues[i]) { 
SEhisy mal "yy 
} 
}) .blur (function(){ 
if ($.trim($ (this) .val()) == "") { 
$ (this) .val (swapValues [i]); 
} 
Ds 
3 
ds 
</script> 
<!-- JavaScript 程序 结束 --> 
<title> 示 例 20.15</title> 
<link href="../css/20.15.css" rel="stylesheet" type="text/css" /> 
<!-- 调用 外 部 样式 表 --> 
</head> 
<body> 
<div id="search box"> 
<I== 表单 开始 一 > 
<form id="search form" method="post" action="#"> 
<input type="text" id="s" value=" 搜 索 " class="swap_value" /> 
</form> 
<input type="image" src="../images/20.91.jpg" width="91" height="54" 
id="go" alt=" 搜 索 " title=" 搜 索 " /> 
</div> 
</body> 
</html> 


效果 如 图 20.15 所 示 。 


示人 N20.15 - 


C 在 |@fileV/FVbj/ 示 例 /第 20 章 /20.: 究 a| 


J 


亮 搜索 引擎 效果 图 


图 20.15 ”使 用 CSS+JavaScript 制作 溪 


全 技巧 : 示例 20.15 中 的 图 片 可 以 根据 设计 师 设计 的 图 片 进行 更 改 ， 两 张 图 片 的 更 改 ， 使 
网 站 更 加 灵活 和 漂亮 。 
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20.6 ”制作 图 片 浏览 器 


制作 图 片 浏览 器 ， 是 通过 CSS+JavaScript 来 共同 完成 的 。 这 里 将 给 出 一 个 很 好 用 的 图 
片 浏览 器 ， 当 鼠标 经 过 左边 的 图 像 时 ， 便 可 以 看 到 右边 的 大 图 。 

【示例 20.16】 下 面 是 使 用 CSS+JavaScript 制作 图 片 浏览 器 的 效果 。 示 例 使 用 的 是 外 部 
样式 表 ， 放 在 css 文件 夹 里 ， 命 名 为 20.16.css。 这 里 将 分 别 给 出 CSS 文件 和 页 面 文件 的 代 
码 ， 代 码 如 下 。 

CSS 文件 代码 : 


h2,ul,1li{margin:0; padding:0; list-style:none;} 

img{border:0;} 

.copyright {position:relative; top:520px; left:1l0px; width:300px; height: 
200px; line-height:10px;} 

.Copyright a:link{color:#666666; text-decoration:none;} 

.copyright a:hover{color:#CC9900; text-decoration:underline;} 
.imgview{position:relative; top:0; width:850px; height:auto; min-height: 
440px; background-color:#CCC; font-size:80%;} 

.imgview h2{position:absolute; top:l0px; left:10px; width:290px; height: 
30px; background-color:#FFFFFF; color:#F00; font-size:1.2em; text-indent: 
1l0px; line-height:30px; } 

.imgview ul{position:absolute; top:50px; left:10px; z-index:999; width: 
290px; height:auto; min-height:380px; background-color:#FFFFFF;} 
.imgview ul li{float:left; width:82px; height:59px; margin:8px 6px 7px; 
border:1lpx solid #DEDEDE;} 

.imgview ul li strong{display:none;} 

.imgview ul li:hover{cursor:pointer;} 

.imgview ul li a:hover{display:block; width:100%; height:100%; text-— 
decoration:none;} 

.imgview ul li:hover strong, 

.imgview ul li a:hover strong{display:block; position:absolute; top:350px; 
left:300px; width:537px; height:30px; background-color:#FFFFFF; 
color:#000000; text-indent:10px; line-height:30px;} 

.imgview ul li:hover span img, .imgview ul li a:hover span img{position: 
absolute; top:-40px; left:300px; width:537px; height:380px; } 

.imgview ul li img{ width:80px; height:57px; } 

.imgview .imgview-bgtext{ 

position:absolute; 

top: 9px; 

left:309px; 

z-index:1; 

width:538px; 

height:380px; 

border:1lpx solid #999999; 

Color:#EFEFEF; 

font-size:5em7 

text-align:center; 

line-height:380px; 

站 


== Neal = 
.imgview!{ 

/*lte IE 6 hack*/ 
height:440px; 
font—size: TD%®; 
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} 

.imgview ull{ 

/*lte IE 6 hack*/ 
height:380px; 

3 

.imgview ul:after{ 
/*FF hack*/ 
ontents "sy 
display:block; 
height:0; 
clear:both; 
visibility:hidden; 
} 

.imgview ul 1i{ 
/*lte IE 6 hack*/ 

_height:63px; 

_margin:8px Spx 7px; 
} 

.imgview .imgview-bgtext{ 
/*lte IE 6 hack*/ 

_width:539px; 


} 
/*==E== hack ====*/ 


全 说 明 : 由 于 图 片 浏览 器 的 结构 比较 复杂 ， 所 以 CSS 文件 的 代码 也 会 比较 多 ,这 样 就 使 页 
面 上 的 代码 大 大 地 减少 了 。 


页 面 文件 代码 : 


<?xml version="1.0" encoding="utf-8"?> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/ 
TR/xhtml1/DTD/xhtmll-strict.dtd"> 

<html] xmlns="http://www.w3.0rg/1999/xhtml" xml:lang="zh-cn" lang="zh-cn"> 


<head> 
<meta http-equiv="pragma" content="no-cache" /> 
<!-- 缓 存 信息 --> 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta http-equiv="Content-Language" content="gb2312" /> 
<! 一 -编码 信息 --> 
<meta name="robots" conten all™" /> 
<meta name="author" content="Ghost" /> 
<meta name="Copyright" content="CSSForest" /> 
<meta name="Description"” content="CSS 鲜花 " /> 
<meta name="Keywords" content="ImgView,CSS, 样 式 表 , 标准 , web,Blog, 博客 ,XHTML， 
CSSForest,CSS 鲜花 " /> 
<title> 示 例 20.16</title> 
<link rel="Shortcut Icon"” href="/favicon.ico" type="image/x-icon" /> 
<!-- JavaScript 程序 开始 --> 
<script src="http://www.google-analytics.com/urchin.javascript" type= 
"text/javascript"></script> 
<script type="text/javascript"> uacct = "UA-780254-5";urchinTracker (); 
</script> 
<script language="javascript" type="text/javascript"> 
$ (function() { 

swapValues = []; 

$(".swap value") .each (function (i){ 

swapValues[i] = $(this) .val(); 
$ (this) .focus (function(){ 
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]}) 


if ($(this) .val() == swapValues[i]) { 


SELSy wa 
} 
}) .blur (function(){ 
EE (Strin($s (thisy. val()y == wy 
$ (this) .val (swapValues [i]); 


</script> 


二 三 


JavaScript 程序 结束 --> 


<title> 示 例 20.16</title> 
<link href="../css/20.16.css" rel="stylesheet" type="text/css" /> 


< 


调用 外 部 样式 表 --> 


</head><br/> 


<div 


class="imgview"> 


L 


<div class="imgview-bgtext"> 图 片 浏览 器 </div> 


<h2> 图 片 浏览 器 </h2> 
<ul> 


<1i title=" 红 玫瑰 "><!--[if lte IE 6 


><a href="#"><! [endif]--> 


<strong> 红 玫瑰 </strong><span><img src="../images/19.12 1.jpg" alt= 
" 红 玫 瑰 " /></span><!--[if lte IE 6]></a><! [endif]--></1i> 


<1i title=" 康 乃 志 "><!--[if lte IE 6 


><a href="#"><! [endif]--> 


<strong> 康 妃 志 </strong><span><img src="../images/19.12 2.jpg" alt= 
" 康 乃 志 " /></span><!--[if lte IE 6]--></a><![endif]--></1i> 


<1i title=" 粉 玫瑰 "><!--[if lte IE 6 


><a href="#"><! [endif]--> 


<strong> 粉 玫瑰 </strong><span><img src="../images/19.12 3.jpg" alt= 
" 粉 玫 瑰 " /></span><!--[if lte IE 6]></a><! [endif]--></1i> 


<li title=" 红 玫瑰"><!--[if lte IE 6 


><a href="#"><! [endif]--> 


<strong> 红 玫瑰 </strong><span><img src="../images/19.12 4.jpg" alt= 
" 红 玫 瑰 " /></span><!--[if lte IE 6]></a><! [endif]--></1i> 


<1i title=" 康 乃 志 "><!--[if lte IE 6 


><a href="#"><! [endif]--> 


<strong> 康 乃 愉 </strong><span><img src="../images/19.12 5.jpg" alt= 
" 康 乃 志 " /></span><!--[if lte IE 6]></a><! [endif]--></1i> 


<1i title=" 黄 色 康 乃 世 "><!--[if lte IE 
<strong> 黄 色 康 乃 认 </strong><span><img 
alt=" 黄 色 康 乃 志 " /></span><!--[if lte 
<1i title=" 白 色 康 乃 志 "><!--[if lte IE 
<strong> 白 色 康 乃 世 </strong><span><img 
alt=" 白 色 康 乃 雇 " /></span><!--[if lte 


6] ><a href="#"><! [endif]--> 
src="../images/19.12 6.jpg" 
IE 6]></a><! [endif]--></1i> 
6]><a href="#"><! [endif]--> 
src="../images/19.12 7.jpg" 
IE 6]></a><! [endif]--></1i> 


<1i title=" 粉 玫瑰 "><!--[if lte IE 6]><a href="#"><! [endif]--> 
<strong> 粉 玫瑰 </strong><span><img src="../images/19.12 8.jpg" 
alt=" 粉 玫瑰 " /></span><!--[if lte IE 6]></a><! [endif]--></1i> 


<1i title=" 粉 色 康 乃 志 "><!--[if lte IE 
<strong> 粉 色 康 乃 志 </strong><span><img 
alt=" 粉 色 康 乃 声 " /></span><!--[if lte 


</nl> 


</div> 
</body> 
</html> 


在 这 里 ， 


如 果 没 什么 大 的 改动 ， 可 以 直接 使 用 ， 只 需 


径 即 可 。 这 是 一 个 灵活 性 很 大 的 图 片 浏览 
效果 如 图 20.16 所 示 。 
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6]><a href="#"><! [endif]--> 
src="../images/19.12 9.jpg" 
IE 6]></a><! [endif]--></1i> 


要 把 图 片 路 径 改 成 自己 需要 的 路 
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| 
pr : 到 
:了 CG | filey/J/Fybj/ 示 全 /第 20 宣 /20.16.html 安 | A 
图 片 浏览 器 


康 万世 


图 20.16 ”使 用 CSS+JavaScript 制作 图 片 浏览 器 效果 图 


20.7 ”JavaScript 小 程序 


在 网 站 的 制作 过 程 中 ， 难 免 会 要 用 到 一 些 JavaScript 小 程序 来 点 级 网 站 。 本 节 将 介绍 
两 种 经 常用 到 的 JavaScript 小 程序 ， 分 别 是 : 显示 时 间 和 鼠标 跟随 字体 。 


20.7.1 显示 时 间 


在 浏览 网 站 的 时 候 ， 经 常 看 到 网 站 上 会 显示 当天 的 时 间 ， 这 就 是 使 用 JavaScript 来 进 
行 设 置 的 。 本 小 节 将 举例 说 明 这 种 显示 时 间 的 制作 方法 。 

【示例 20.17】 下 面 是 使 用 CSS+JavaScript 显示 时 间 的 具体 效果 。 由 于 这 里 的 CSS 定义 
比较 少 ， 所 以 示例 中 直接 把 CSS 样式 用 作 内 部 样式 表 使 用 。 代 码 如 下 : 


<!DOCTYPE htm1l PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www 
.W3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.o0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 20.17</title> 

<style type="text/css"> 

和 

.mainfram{ background-image:url(../images/20.10.jpg); border:1lpx #993300 
dashed; width:300px; height:80px; padding:10px;} 

.timefram{ font-size:14px; color:#CC0000;} 

一 -> 

</style> 

</head> 

<body> 
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<div class="mainfram"> 
<h3> 欢 迎 光临 我 的 博客 </h3> 
<div class="timefram"> 
<!--JavaScript 脚本 开始 --> 
<script language=javascript> 
today=new Date(); 
var h = today.getHours(); 
var m = today.getMinutes (); 
Var n = today.getSeconds (); 
人 
function initRArray(){ 
this.length=initArray.arguments.length 
for (var i=0;i<this.length;i++) 
this[i+1]=initArray.arguments[i] } 
var d=new initArray ("星期 日 "，" 星 期 一 ", "星期 二 "，" 星 期 三 ", "星期 四 "，" 星 
期 五 "， "星期 六 ") 7 
document .write (t, "现在 时 间 是 : "， d [today.getDay()+1]," ",today 
.getHours () ,": ",today.getMinutes()+1,": "vtoday.-getSeconds () ) 7 
</script> 
<!--JavaScript 脚本 结束 --> 
<!--JavaScript 脚本 开始 --> 
<script language=javascript> 
SI== 
now=new Date () ,hour=now.getHours () 
if (hour<6) {document .write (" 凌 晨 好 !") } 
else if(hour<12) {document .write(" 早 上 好 !")} 
else if(hour<14) {document .write(" 中 午 好 !") } 
else if(hour<18) {document .write(" 下 午 好 !") } 
else if(hour<20) {document .write(" 傍 晚 好 !") } 
else if(hour<22) {document .write(" 晚 上 好 !") } 
else{document .write ("夜里 好 !'")} 
es 
</script> 
<!--JavaScript 脚本 结束 --> 
</div> 
</div> 
</body> 
</html> 


效果 如 图 20.17 所 示 。 


图 20.17 使 用 CSStjavaScript 显示 时 间 效 果 图 


全 说 明 : 示例 20.17 是 一 套 很 齐全 的 时 间 显示 ， 当 不 需要 某 一 部 分 的 时 候 ， 直 接 删 除 即 可 。 
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20.7.2 鼠标 跟随 字体 


鼠标 跟随 字体 就 是 当 鼠 标 移动 的 时 候 , 文字 也 会 跟着 鼠标 移动 ,在 很 多 个 人 网 站 上 都 可 


以 看 到 这 种 效果 。 本 小 节 将 介绍 一 种 比较 常见 的 使 用 JavaScript 制作 的 鼠标 跟随 字体 效果 。 


【示例 20.18】 下 面 是 使 用 CSS+JavaScript 显示 鼠标 跟随 字体 的 具体 效果 。 由 于 这 里 的 


CSS 定义 比较 少 ， 所 以 示例 中 直接 把 CSS 样式 用 作 内 部 样式 表 使 用 。 代 码 如 下 : 


<!DOCTYPE htm] PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www 
-WwW3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html] xmlns="http://www.w3.0org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 20.18</title> 

<style type="text/css"> 

.spanstyle {color: #990; font-family: 宋体 ; font-size: 10pt; position: 
absolute; top: -50px; visibility: visible;} 

</style> 

</head> 

<body> 

<script> 

Var x,y 

var step=12 // 调 整 跟随 字体 的 字 间 距 
var flag=0 

var message=" 和 鼠标 跟随 字体 HTML 网 站 设计 JavaScript 小 程序 "” ”// 填 写 跟随 鼠标 的 文字 
message=message.split("") 

Var xpos=new Array() 

for (i=0;i<=message.length-1;i++) { 

xpos [i]=-50 

} 

Var ypos=new Array() 

for (i=0;i<=message.length-1;i++) { 

ypos [i]=-200 

function handlerMM(e) { 

X = (document.layers) ? e.pageX : document.body.scrol1Left+event .clientX 
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY 
flag=1 

. 

function www helpor net() { 

if (flag==1 && document.all) { 

for (i=message.length-1; i>=1; i--) { 

xpos [i]=xpos [i-1]+step 

ypos [i]=ypos[i-1] 

} 

Xpos [0]=x+step 

ypos[0]=y 

for (i=0; i<message.length-—1; i++) { 

var thisspan = eval("span"+(i)+".style") 

thisspan.posLeft=xpos [i] 

thisspan.posTop=ypos [i] 

} 
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4 

else if (flag==1 && document.layers) { 
for (i=message.length-1; i>=1; ii--) { 
xpos [i]=xpos[i-1]+step 

ypos[i]=ypos[i-1] 

} 

Xpos [0]=x+step 

ypos[0]=y 

for (i=0; i<message.length-1; i++) { 
var thisspan = eval("document .span"+i) 
thisspan.left=xpos [i] 
thisspan.top=ypos[i] 

} 

var timer=setTimeout ("www helpor net()",30) 
} 

for (i=0;i<=message.length-1;i++) { 
document .write("<span id="'span"+i+"' class='spanstyle'>") 
document .write (message[i]) 

document .write("</span>") 

¥ 

if (document.layers){ 

document .captureEvents (Event .MOUSEMOVE); 
3 

document .onmousemove = handlerMM; 

www helpor net(); 

J 

世人 

</body> 

</html> 


外 说 明 : 在 这 里 ， 基 本 上 页 面 上 的 代码 都 是 不 用 动 的 ， 只 需要 调整 一 下 字 间 距 ， 修 改 想 要 
出 现 的 文字 便 可 以 了 。 这 里 的 CSS 样式 , 起 着 很 大 的 作用 ， 如 果 去 掉 了 ， 就 无 法 
显示 出 筷 标 跟随 的 效果 了 。 


效果 如 图 20.18 所 示 。 
~ E 地 一 
云 - are | EE Ce 


Es 生 很 日 。 坦 看 M。 必 靖 夫 W) 工具 各 了 (0 


EEC 


图 20.18 ”使 用 CSS+JavaScript 显示 鼠标 跟随 字体 效果 图 
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20.8 本 章 小 结 


本 章 主要 学 习 了 网 站 制作 中 经 常会 用 到 的 一 些 实 例 ， 详 细 讲 解 了 制作 导航 条 、 下 拉 菜 
单 、 小 三 角形 菜单 、 居 中 效果 、 搜 索引 擎 、 图 片 浏览 器 的 实现 方法 。 还 介绍 了 一 些 常见 的 
JavaScript 小 程序 , 这 些小 程序 是 可 以 直接 供 读者 使 用 的 。 本 章 所 提供 的 实例 不 仅 可 以 应 用 
到 博客 中 ， 在 平时 制作 网 站 的 时 候 也 会 用 到 ， 所 以 读者 需要 认真 学 习 。 下 一 章 将 结合 这 一 
章 和 上 一 章 的 内 容 来 制作 一 个 完整 的 博客 网 站 。 
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本 章 将 会 把 前 两 章 所 讲 的 示例 整合 在 一 起 , 形成 一 个 完整 的 博客 网 站 , 以 供 读者 参考 。 
在 整合 过 程 中 ， 会 先 整合 一 个 一 个 的 页 面 ， 最 后 再 使 用 导航 条 把 每 个 网 页 整合 在 一 起 形成 
一 个 网 站 。 本 章 将 会 使 用 两 种 方式 来 进行 整合 ， 分 别 是 使 用 table 整合 网 站 和 使 用 div+CSS 
整合 网 站 。 


21.1 使 用 table 整合 我 的 博客 


使 用 table 整合 我 的 博客 , 就 是 使 用 前 面 所 讲 的 所 有 table 实例 来 进行 我 的 博客 的 整合 。 
在 上 一 章 的 导航 条 里 可 以 看 出 , 我 的 博客 共 分 为 四 个 页 面 : 关于 我 们 、 鲜 花 展示 、 留 言 版 、 
联系 我 们 。 本 节 将 会 对 这 四 个 页 面 进行 整合 ， 再 通过 导航 条 把 它们 链接 成 一 个 网 站 。 为 了 
方便 整合 网 站 ， 首 先 必须 先 建 一 个 文件 夹 ， 命 名 为 tableBlogWeb， 用 来 把 网 站 上 的 东西 全 
部 放 在 文件 夹 里 ， 以 便 使 用 。 


21.1.1 整合 “关于 我 们 ”页 面 


“关于 我 们 ”的 页 面 和 第 19 章 所 讲 的 “我 的 日 志 ” 页 面 差不多 ， 只 需要 把 内 容 和 标题 
更 换 一 下 ， 再 加 上 一 个 导航 条 就 可 以 了 。 在 第 20 章 里 讲 过 导航 条 ， 这 里 将 使 用 里 面 的 可 以 
显示 阴影 的 横向 导航 条 来 对 页 面 进行 填充 。 

【示例 21.1】 下 面 是 “关于 我 们 ”页 面 整合 的 效果 。 示 例 使 用 的 是 外 部 样式 表 ， 是 直 
接 选 用 了 前 面 的 20.3.css。 由 于 CSS 文件 有 所 改动 ， 所 以 这 里 将 分 别 给 出 CSS 文件 和 页 面 
文件 的 代码 ， 代 码 如 下 。 

CSS 文件 代码 : 


@charset "utf-8"; 

/*CSS Document*/ 

#nav li{float:left; margin-left:30px;} 

#nav span{display:none;} 

#nav af font-size:14px;text-decoration: none; display:block; font-weight: 
Bold;} 

#nav a:hover { top:lpx; left:1lpx; position:relative; color:#ccc;} 

#nav a:hover span { display:block; top:-2px; left:-2px; position:absolute; 
color:#0000ff;} 


全 说 明 : 由 于 示例 使 用 的 都 是 前 面 讲 过 的 代码 ， 只 是 做 了 一 些 属性 值 的 改变 ， 所 以 在 书写 
上 ， 为 了 节省 空间 ， 示 例 中 把 代码 合并 在 一 起 编写 ， 具 体格 式 还 是 需要 参照 前 面 
例子 比较 规范 的 书写 格式 。 
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页 面 文件 代码 : 


<!DOCTYPE html] PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www 
-W3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 关 于 我 们 </title> 

<link href="../css/20.3.css" rel="stylesheet" type="text/css" /> 
</head> 


<body bgcolor="#998559"> 
<table width="700px" height="500px" border="0" cellspacing="0" cellpadding= 
"0" align="center" background="../ 第 20 章 /images/19.1.jpg" > 
< 人 E 这 
<td> <img src="../images/19.1.1.jpg" width="348" height="120" /><img 
src="../images/19.1.1.jpg" alt="1" width="348" height="120" /></td> 
<!-- 插 入 图 片 --> 
</tr> 
xtr> 
<td> 
<table width="700px" height="400px" border="1lpx" align="center" 
cellpadding="5px" cellspacing="0" bordercolor="#998559"> 
和 过 
<td colspan="2" align="center" bgcolor="#F6EABA"> 
<div id="nav"> 


<ul> <!-- 插 入 列表 --> 
<1i><a href="../ 第 20 章 /about.html"> 关 于 我 们 <span> 关 于 
我 们 </span></a></1i> 


<1i><a href="../ 第 20 章 /product.html"> 鲜 花 展示 <span> 鲜 
花 展示 </span></a></1i> 
<1i><a href="../ 第 20 章 /message.html"> 留 言 版 <span> 留 言 
版 </span></a></1i> 
<1i><a href="../ 第 20 章 /contact.html"> 联 系 我 们 <span> 联 
系 我 们 </span></a></1i> 
</ul> 
</div> 
</td> 
</tr> 
<Er> 
<td width="402px" bgcolor="#F6EABA"> 
<h2> 关 于 我 们 </h2><hr /> 
你 已 经 使 我 永生 ， 这 样 做 是 你 的 快乐 。<br/> 
这 脆 薄 的 杯 儿 ， 你 不 断 地 把 它 倒 空 ， 又 不 断 地 以 新 生命 来 充满 。<br/> 
这 小 小 的 苇 笛 ， 你 携带 着 它 逾 山越 谷 ， 从 第 管 里 
吹出 永 新 的 音乐 。<br/> 
在 你 双手 的 不 朽 的 按 抚 下 ， 我 的 小 小 的 心 ， 消 融 在 无 边 快乐 之 中 ， 发 出 不 可 言说 的 词 调 。<br/> 
你 的 无 穷 的 赐予 只 倾 入 我 小 小 的 <br/> 
手 里 。 时 代 过 去 了 ， 你 还 在 倾注 ， 而 我 的 手 里 还 有 余 量 待 充满 。<br/> 
你 已 经 使 我 永生 ， 这 样 做 是 你 的 快乐 。<br/> 
这 脆 薄 的 杯 儿 ， 你 不 断 地 把 它 倒 空 ， 又 不 断 地 以 新 生命 来 充满 。<br/> 
这 小 小 的 苇 笛 ， 你 携带 着 它 人 请 山越 谷 ， 从 笛 管 里 吹出 永 新 的 音乐 。<br/> 
在 你 双手 的 不 朽 的 按 抚 下 ， 我 的 小 小 的 心 ， 消 融 在 无 边 快乐 之 中 ， 发 出 不 可 言说 的 词 调 。<br/> 
你 的 无 穷 的 赐予 只 倾 入 我 小 小 的 <br/> 
手 里 。 时 代 过 去 了 ， 你 还 在 倾注 ， 而 我 的 手 里 还 有 余 量 待 充满 。<br/> 
</td> 
<td width="272px" bgcolor="#F6EABA"> 


mS 


第 3 篇 ”网 站 开发 实例 


<table border="2px" align="center" bordercolor="#993300"> 


中 
<td> 
<a href="../images/21.1.jpg" target=" blank"><img 
src="../images/21.1.jpg" border="0" width="200" 
height="220" /></a> <!-- 插 入 图 片 和 链接 --> 
</td> 
SNEr> 
</table> 
</td> 
</Er> 
</table><br /> 
</td> 
<HEr> 
</table> 
</body> 
</html> 


效果 如 图 21.1 所 示 。 
(BEE Er pe a™= 入 oe 


文 作 月 。 辆 误 日 ”查看 (V) 收音 交 [A)， 工具 (D 帮助 (H) 


关于 我 们 


你 已 经 使 我 永生 ， 这 样 做 是 你 的 快乐 
这 及 浒 的 杯 儿 ， 你 不 断 地 把 亡 倒 空 ， 又 不 断 地 以 新 生命 来 


充满 。 
全 你 携带 着 它 逾 山越 谷 ， 从 管 管 里 吹出 永 


新 | 
人 我 的 小 小 的 心 ， 清 融 在 无 边 快 


时 代 过 去 了 ， 从 全 名， 而 我 的 手 星 还 有 余 量 待 


和 
你 已 经 使 我 永生 ， 这 样 做 是 你 的 快乐 
这 胸 薄 的 杯 儿 ， 你 不 断 地 把 它 倒 空 ， 又 不 断 地 以 新 生命 来 


充满 。 
nal 你 携带 着 亡 途 山越 谷 ， 从 短 管 里 吹出 永 新 
人 我 的 小 小 的 心 ， 消 怠 在 无 边 快 


a 时 代 过 去 了 ， 你 还 在 倾注 ， 而 我 的 手 里 还 有 佘 量 待 


图 21.1 “关于 我 们 ”页 面 整合 效果 图 


名 说明: 页 面 代码 里 ， 为 导航 条 做 了 四 个 链接 : 关于 我 们 ( aboutme html ) 、 鲜 花 展示 
(producthtml) 、 留 言 版 (message.html ) 、 联 系 我 们 ( contact.html ) 。 


21.1.2 整合 “鲜花 展示 ”页 面 


“鲜花 展示 ”页 面 是 在 “关于 我 们 ”页 面 上 做 修改 ， 只 要 把 下 面 的 内 容 更 换 成 鲜花 相 
关 的 内 容 就 可 以 了 。 在 第 20 章 里 讲 过 图 片 浏览 器 , 这 里 将 使 用 图 片 浏览 器 显示 产品 相关 的 
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内 容 对 页 面 进行 填充 。 

【示例 21.2】 下 面 是 “鲜花 展示 ”页 面 整合 的 效果 。 示 例 使 用 的 是 外 部 样式 表 ， 是 直 
接 选 用 了 前 面 的 20.3.css 和 20.16.css。 由 于 CSS 文件 没有 改动 的 地 方 ， 所 以 这 里 只 给 出 页 
面 文件 的 代码 ， 而 页 面 上 的 代码 过 多 ， 这 里 将 分 为 <head> 标 签 和 <body> 标 签 两 部 分 进行 描 
述 。 代 码 如 下 。 

<head> 标 签 代 码 : 


<?xml version="1.0" encoding="utf-8"?> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 .0 Strict//EN" "http://www.w3.org/ 
TR/xhtml1/DTD/xhtmll-strict.dtd"> 

<html] xmlns="http://www.w3.0rg/1999/xhtml" xml:lang="zh-cn" lang="zh-cn"> 


<head> 
<meta http-equiv="pragma" content="no-cache" /> 
<!== 缓 存 信息 ==> 


<meta http-equi 
<meta http-equi 


<!-- 编 码 信息 --> 
robots" content="all" /> 
author" content="Ghost" /> 
Copyright" content="CSSForest" /> 
<meta name="Description" content="CSS 鲜花 " /> 
<meta name="Keywords" content="ImgView,CSS, 样式 表 , 标准 , web, Blog, 博客 ,XHTML， 
CSSForest, CSS 鲜花 " /> 
<title> 博 客 日 志 </title> 
<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" /> 
<!--JavaScript 程序 开始 --> 
<5cripEe src="http://www.google-analytics.com/urchin.javascript" 
type="text/javascript"></script> 
<script type="text/javascript"> uacct = "UA-780254-5";urchinTracker (); 
</script> 
<script language="javascript" type="text/javascript"> 
$(function() { 
swapValues = []; 
$(".swap value") .each (function (i){ 
swapValues[i] = $ (this) .val(); 
$ (this) .focus (function(){ 
if ($(this).val() == swapValues[i]) { 
acpilsj ral de 


"Content-Type" content="text/html; charset=utf-8" /> 
"Content-Language" content="gb2312" /> 


} 
}) .blur (function(){ 
if ($.trim($(this) .val()) == ™") { 
$ (this) .val (swapValues [i]); 
} 
JJ 
对 
]) 7 
</script> 
<!--JavaScript 程序 结束 --> 
<title> 博 客 日 志 </title> 
<link href="../css/20.3.css" rel="stylesheet" type="text/css" /> 


<link href="../css/20.16.css" rel="stylesheet" type="text/css" /> 
<!-- 调 用 外 部 样式 表 --> 
</head> 
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外 说 明 : <head> 标 签 代码 里 ， 大 多 数 都 是 使 用 了 图 片 浏览 器 的 代码 ， 由 于 这 里 有 两 个 需要 
用 到 CSS 文件 的 地 方 ， 所 以 加 入 了 两 个 外 部 样式 表 的 连接 。 


<body> 标 签 代码 : 


<body bgcolor="#998559"> 
<table width="700px" border="0" cellspacing="0" cellpadding="0" align= 
"center" > 
<EE> 
<td><img src="../images/19.1.1.jpg" width="350" height="120"/><img 
src="../images/19.1.1.jpg" width="350" height="120"/></td> 
< 
5 本 他 
<td> 
<table width="700"height="400px"” border="1px"” align="center"cellpadding= 
"5px" cellspacing="0" bordercolor="#998559"> 
<tr> 
<td width="700px" colspan="1" align="center" bgcolor="#F6EABA" > 
<div id="nav" > 


<ul > 
<1i><a href="21.1.html"> 关 于 我 们 <span> 关 于 我 们 </ span> 
</a></1i> 
<1i><a href="product .html"> 鲜 花 展示 <span> 鲜 花 展示 
</span></a></1i> 
<1i><a href="message.html"> 留 言 版 <span> 留 言 版 </span> 
</a></1i> 
<1i><a href="contact .html"> 联 系 我 们 <span> 联 系 我 们 
</span></a></1i> 
</ul> 
</div> 
</td> 
HE 
<EE> 


<td width="700" height="400px" bgcolor="#F6EABA"> 
<h2> 鲜 花 展示 </h2><hr /> 
<div class="imgview"> 

<div class="imgview-bgtext"> 我 们 的 产品 </div> 

<h2> 我 们 的 产品 </h2> 

<ul> 
<1i tit1le=" 红 玫瑰 "><!--[if lte IE 6]><a href="#"><! [endif]--> 
<strong> 红 玫瑰 </strong><span><img src="../images/19.12 1.jpg" alt= 
" 红 玫 瑰 " /></span><!--[if lte IE 6]></a><! [endif]--></1i> 
<1i title=" 康 乃 馨 "><!--[if lte IE 6]><a href="#"><! [endif]--> 
<strong> 康 乃 座 </strong><span><img src="../images/19.12 2.jpg" alt= 
" 康 乃 志 " /></span><!--[if lte IE 6]></a><! [endif]--></1i> 
<1i title=" 粉 玫瑰 "><!--[if lte IE 6]><a href="#"><! [endif]--> 
<strong> 粉 玫瑰 </strong><span><img src="../images/19.12 3.jpg" alt= 
" 粉 玫瑰 "” /></span><!--[if lte IE 6]></a><! [endif]--></1i> 
<1i title=" 红 玫瑰 "><!--[if lte IE 6]><a href="#"><![endif]--> 
<strong> 红 玫瑰 </strong><span><img src="../images/19.12 4.jpg" alt= 
" 红 玫 瑰 " /></span><!--[if lte IE 6]></a><! [endif]--></1i> 
<1i title=" 康 乃 志 "><!--[if lte IE 6]><a href="#"><! [endif]--> 
<strong> 康 乃 世 </strong><span><img src="../images/19.12 5.jpg" alt= 
" 康 乃 志 " /></span><!--[if lte IE 6]></a><! [endif]--></1i> 
<1i title=" 黄 色 康 乃 声 "><!--[if lte IE 6]><a href="#"><! [endif]--> 
<strong> 黄 色 康 乃 志 </strong><span><img src="../images/19. 2 
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alt=" 黄 色 康 乃 声 " /></span><!--[if 


lte IE 6]></a><! [endif]--></1i> 


<1i title=" 白 色 康 乃 志 "><!--[if lte IE 6]><a href="#"><! [endif]--> 
<strong> 白 色 康 乃 世 </strong><span><img src="../images/19.12 7.jpg" 


alt=" 白 色 康 乃 世 " /></span><!--[if 


lte IE 6]></a><! [endif]--></1i> 


<1i title=" 粉 玫瑰 "><!--[if lte IE 6]><a href="#"><![endif]--> 
<strong> 粉 玫瑰 </strong><span><img src="../images/19.12 8.jpg" alt= 


" 粉 玫瑰 "” /></span><!--[if lte IE 


6]></a><! [endif]--></1i> 


<1i title=" 粉 色 康 乃 志 "><!--[if lte IE 6]><a href="#"><! [endif]--> 
<strong> 粉 色 康 乃 志 </strong><span><img src="../images/19.12 9.jpg" 


alt=" 粉 色 康 妃 声 "” /></span><!--[if 
</ul> 


</div> 


</table> 
</body> 
</html> 


效果 如 图 21.2 所 示 。 


lte IE 6]></a><! [endif]--></1i> 


图 21.2 “鲜花 展示 ”页 面 整合 效果 图 


21.1.3 整合 “留言 版 ”页 面 


“留言 版 ”页 面 只 需要 在 “鲜花 展示 ”页 面 上 进行 修改 就 可 以 了 ， 只 要 把 下 面 的 内 容 
更 换 成 留言 版 相关 的 内 容 。 在 第 19 章 里 讲 过 留言 版 , 这 里 将 使 用 留言 版 表单 内 容 显 示 留 言 


版 相关 的 内 容 对 页 面 进行 填充 。 
【示例 21.3】 下 面 是 “留言 版 ”页 面 整 合 的 效 
选用 了 前 面 的 20.3.css 和 19.9.css。 由 于 CSS 文件 


果 。 示 例 使 用 的 是 外 部 样式 表 ， 是 直接 
已 只 有 19.9.css 有 所 改动 ， 所 以 这 里 只 给 
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出 19.9.css 文件 代码 和 页 面 文件 的 代码 。 代 码 如 下 。 
19.9.css 文件 代码 : 


Q@charset "utf-8"; 

/*CSS Document*/ 

.formfram{ width:400px; margin:20px;} 

ulf{ 
list-style-type:none; 

1i 

{ 
margin-bottom:10px; 
font-size:14px; 

} 

input, textarea 

{ 
border:1lpx solid #996600; 
background:#fff; 

} 

input, textarea 

{ 
star : expression (onmouseover=function() {this.style.backgroundColor= 
"#FFFOD2"}, 
onmouseout=function()f{ 
this.style.backgroundColor="#fff" 
}) 

} 

-in80 {width:80px;} 

.in120 {width:120px;} 

.in250 {width:250px;} 

.submitfram{border:0; margin-top:10px;} 


页 面 文 件 代码 : 


<<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www 
.W3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
<html] xmlns="http://www.w3.0org/1999/xhtml"> 


<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 关 于 我 们 </title> 
<link href="../css/20.3.css" rel="stylesheet" type="text/css" /> 
<link href="../css/19.9.css" rel="stylesheet" type="text/css" /> 

<!-- 调 用 外 部 样式 表 --> 
</head> 


<body bgcolor="#998559"> 
<table width="700px" height="490px" border="0" cellspacing="0" cellpadding= 
"0" align="center" > 
<tr> 
<td> <img src="../images/19.1.1.jpg" width="350" height="120" /><img 
src="../images/19.1.1.jpg" alt="1" width="350" height="120" /></td> 
<! 一 -插入 图 片 --> 
</tr> 
<tr> 
<td> 
<table width="700px" height="400px" border="1lpx" align="center" 
cellpadding="5px" cellspacing="0" bordercolor="#998559"> 
<Lr> 
<td colspan="2" align="center" bgcolor="#F6EABA"> 
<div id="nav"> 


<ul> <!-- 插 入 列表 --> 
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<1i><a href="aboutme .html"> 关 于 我 们 <span> 关 于 我 们 


</span></a></1i> 
<1i><a href="product .html"> 鲜 花 展示 <span> 鲜 花 展示 
</span></a></1i> 
<1i><a href="message.html"> 留 言 版 <span> 留 言 版 </span> 
</a></1i> 
<1i><a href="contact .html"> 联 系 我 们 <span> 联 系 我 们 </ span> 
</a></1i> 
</ul> 
</div> 
</td> 
/Er> 
< 


<td bgcolor="#F6EABA"> 
<h2> 留 言 版 </h2><hr /> 
<div class="formfram"> 
<form method="post" action=""> 


<ul> 
<1i> 姓 gnbsp; gnbsp; gnbsp; &nbsp; 名 : 
<input class="in80" type="text" /></1i> <!-- 设 置 输入 框 --> 
<1i> 联 系 电话 : 
<input class="in120" type="text" /></1i> !-- 设置 输入 框 --> 
<1i> 联 系 地 址 : 
<input class="in250" type="text" /></1i> <!-- 设 置 输入 框 --> 
<1i><textarea name="textarea" id="textarea" cols= > 请 
输入 留言 内 容 </textarea></1i> <!-- 设 置 输入 文本 域 --> 
<1i> 
<input class="submitfram" width="60px"” height="22px" type= 
"image" name="imageField" id="imageField" src="../images/ 
NO > <!-- 设 置 提交 按钮 --> 
&nbsp7 
<input class="submitfram" width="60px" height="21px"” type= 
"image" name="imageField" id="imageField" src="../images/ 
OC TE po /> <!-- 设 置 重 置 按钮 --> 
/LA 
</ul> 
</form> 
</div> 
</td> 
<td width="440px" bgcolor="#F6EABA"> 
<table border="2px" align="center" bordercolor="#993300"> 
"../tableBlogWeb/images/message 1.jpg" 
target=" blank"><img src="../images/21.2.jpg" width= 
"200"height="200" border="0" /></a> 
</td> 
</Er> 
</table> 
</td> 
</table><br /> 
</td> 
</tr> 
</table> 
</body> 
</html> 
效果 如 图 21.3 所 示 。 
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图 21.3 “留言 版 ”页 面 整 合 效果 图 


21.1.4 ”整合 “联系 我 们 ”页 面 


“联系 我 们 ”页 面具 需要 在 “留言 版 ”页 面 上 修改 即 可 ， 只 要 把 下 面 的 内 容 更 换 成 “ 联 
系 我 们 ”相关 的 内 容 。“ 联 系 我 们 ”的 内 容 会 比较 少 ， 本 示例 将 在 后 面 增加 第 7 章 的 滚动 
字幕 ， 使 页 面 更 丰富 。 

【示例 21.4】 下 面 是 “联系 我 们 ”页 面 整合 的 具体 效果 。 示 例 使 用 的 是 外 部 样式 表 和 
内 部 样式 表 ， 是 直接 选用 了 前 面 的 20.3.css。 由 于 CSS 文件 里 没有 改动 ， 所 以 这 里 将 不 给 
出 CSS 文件 的 代码 ， 只 给 出 页 面 的 全 部 代码 。 代 码 如 下 : 


<!DOCTYPE html] PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www 
.W3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 博 客 日 志 </title> 
<link href="../css/20.3.css" rel="stylesheet" type="text/css" /> 
<style type="text/css"> 
二 省 二 一 
.contactfram{font-size:14px; line-height:24px; margin-left:40px;} 
.contactfram a{ text-decoration:none; color:#993300; font-weight:bold;} 
一 -> 
</style> 
</head> 
<body bgcolor="#998559"> 
<table width="700px" border="0" cellspacing="0" cellpadding="0" align= 
"center™" background="images/19.1.jpg" > 

<tr> 

<td><img src="../images/19.1.1.jpg" width="350" height="120" /><img 
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src="../images/19.1.1.jpg" alt="1" width="350" height="120" /></td> 
<!-- 插 入 图 片 --> 

/EE> 
直下 > 

<td> 

<table width="700px" border="lpx" align="center" cellpadding="5px" 

cellspacing="0" bordercolor="#998559"> 
SE 
<td colspan="2" align="center" bgcolor="#F6EABA"> 
<div id="nav"> 


<ul> <!-- 插 入 列表 --> 
<1i><a href="aboutme .html"> 关 于 我 们 <span> 关 于 我 们 </ span> 
</a></1i> 
<1i><a href="product .html"> 产 品 展示 <span> 产 品 展示 </span> 
</a></1i> 
<1i><a href="message.html"> 留 言 版 <span> 留 言 版 </span> 
</a></1i> 
<1i><a href="contact .html"> 联 系 我 们 <span> 联 系 我 们 </span> 
</a></1i> 
</ul> 
</div> 
</td> 
</Er> 
<tr> 


<td width="526px" bgcolor="#F6EABA"> 
<h2> 联 系 我 们 </h2><hr /> 
<br /> 
<div class="contactfram"> 
联系 电话 : 187# 站 中 汪 站 本 中 本 <DI /> 
联系 地 址 : XXXXXXXXXXXX<br /> 
E-mail: <a href="mailto:33627323772@126.com">33627323772 
@126.com</a><br /> 
</div> 
</td> 
<td width="440px" bgcolor="#F6EABA" rowspan="2"> 
<table border="2px" align="center" bordercolor="#993300"> 


cr 
<td> 
<a href="../images/21.3.jpg" target=" blank"><img 
src="../images/21.3.jpg" border="0" width="200" 
height="200"/></a> <!-- 插 入 图 片 -->--> 
</td> 
</tr> 
</table> 
</td> 
<HEr> 
<tr> 


<td width="526px" bgcolor="#F6EABA" align="center"> 
<marquee id="mar" onfinish="setTimeout('mar.outerHTML=mar 
.outerHTML', 1000)" width=300px" height="50px" behavior= 
"slide" onmouseover=this.stop() onmouseout=this.start () 
scrollAmount=1 scrollDelay=1 loop="-1"> 
<table> 
E> 
<td> 欢 迎 光 临 我 的 博客 ， 请 提出 宝贵 意见 </td> 
</tr> 
</table> 
</marquee> 
</td> 
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</tr> 
</table><br /> 


</td> 


区 > 
</table> 
</body> 
</html> 


效果 如 图 21.4 所 示 。 
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联系 我 们 


联系 电话 : 187*eeeeee* 
联系 地 址 : OOOOOOCCOCXX 


E-mail: 33627323772@126.com 


图 21.4 “联系 我 们 ”页 面 整合 效果 图 


县 技巧 :学习 完 前 面 的 四 个 页 面 后， 记得 把 相关 的 页 面 、 图 片 等 文件 都 要 放 在 同一 个 文件 


夹 里 ， 这 样 ， 就 可 以 形成 一 个 网 站 了 。 通 过 导航 条 ， 单 击 可 以 查看 到 每 个 页 面 
这 就 是 一 个 简单 的 网 站 。 


21.2 使 用 div+CSS 整合 网 站 


使 用 div+CSS 整合 我 的 博客 , 就 是 使 用 前 面 所 讲 的 所 有 div+CSS 实例 来 进行 我 的 博客 


的 整合 。 


这 里 讲述 的 网 站 整合 页 面 效果 会 和 前 面 的 table 页 面 整 合 的 效果 类 似 , 在 前 面 说 的 


四 个 页 面 的 基础 上 ， 这 里 会 增加 一 个 日 志 页 面 。 在 这 里 ， 先 为 这 个 网 站 建 一 个 文件 夹 ， 命 
名 为 divBlogWeb。 


之 外 全 


整合 “关于 我 们 ”页 面 


“关于 我 们 ”页 面 ， 显 示 效 果 会 和 前 面 使 用 table 的 显示 效果 大 致 一 样 ， 这 里 的 导航 条 
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会 增加 一 栏 “ 最 新 日 志 ” 的 菜单 项 目 。 

【示例 21.5】 下 面 是 “关于 我 们 ”页 面 整合 的 具体 效果 。 示 例 使 用 的 是 之 前 20.3.css 和 
19.3.css， 由 于 两 个 代码 都 做 了 改动 ， 所 以 这 里 将 给 出 两 个 CSS 文件 的 代码 和 页 面 代码 。 
代码 如 下 。 

20.3.css 文件 代码 : 


@charset "utf-8"; 

/*CSS Document*/ 

*{ margin:0 auto; padding:0;} 

#nav{margin-top:10px; margin-left:110px;} 

#nav ul{ list-style-type:none;} 

#nav li{float:left; margin-left:36px;} 

#nav span{display:none;} 

#nav a{font-size:14px; text-decoration:none; display:block; font-weight: 
bold; color:#663300;} 

#nav a:hover{top:lpx; left:lpx; position:relative; color:#ccc;} 

#nav a:hover span{ display:block; top:-2px; left:-2px; position:absolute; 
color:#663300;} 


19.3.css 文件 代码 : 


@charset "utf-8"; 
/*CSS Document*/ 
body{ background:#998559;} /* 设 置 页 面 整体 背景 颜色 */ 
.mainfram{width:700px; } 
.headfram{height:120px; background:url(../images/19.1.1.jpg) repeat;} 
.titlefram{ 
width:700px; 
border:#998559 2px solid; /* 设 置 边框 */ 
background-color:#cc9966; 
padding-top:15px; /* 设 置 内 上 边 距 */ 


} 

.contentfram{ 
width:700px; 
border:#998559 2px solid; 
background-color:#cc9966; 


border-top:0px; /* 设 置 上 边框 为 零 */ 
clear:both; /* 设 置 清除 浮动 */ 
me 
l width:402px; 
fon-size:14px; 
padding:20px; /* 设 置 内 边 距 */ 
float:left; /* 设 置 左 浮动 */ 
text-align:left; /* 设 置 字体 靠 左 */ 
border-right:#998559 2px solid; 
line-height:24px; /* 设 置 行 高 */ 
Color:#333333; 
a 
float:right; /* 设 置 右 浮动 */ 
margin-right:40px; /* 设 置 外 右边 距 */ 


background:url(../images/19.2.1.jpg) no-repeat; 
width:148px; 

height:220px; 

border:#993300 2px solid; 
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margin-top:60px; /* 设 置 外 上 边 距 #/ 
-clearfram{clear:both;} /* 清 除 浮动 */ 
h2{ text-align:left; padding:5px 50px; font-family:" 华 文 新 魏 "， "宋体 "; 
color:#990000;} 
hr{height:2px;} 


且说 明 : 在 页 面 上 ， 使 用 div+CSS 制作 的 网 页 ， 会 比 用 table 制作 的 更 加 丰富 和 细腻 ， 在 
本 例 中 ， 便 可 以 体验 到 这 一 点 。 


页 面 文件 代码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www 

-WwW3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.0org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 博 客 日 志 </title> 

<link href="19.3.css" rel="stylesheet" type="text/css" /> 
<!-- 调 用 外 部 链接 --> 

<link href="20.3.css" rel="stylesheet" type="text/css" /> 
<!-- 调 用 外 部 链接 --> 

</head> 

<body> 

<div class="mainfram"> 

<div class="headfram"></div> 
<div class="titlefram"> 
<div id="nav"> 


<ul> <!-- 插 入 列表 --> 
<1i><a href="about .html"> 关 于 我 们 <span> 关 于 我 们 </span></a> 
过 /> 
<1i><a href="product .html"> 鲜 花 展示 <span> 鲜 花 展示 </span></a> 
区 
<1i><a href="news.html"> 最 新 日 志 <span> 最 新 日 志 </span></a> 
人 


<1i><a href="message.html"> 留 言 版 <span> 留 言 版 </span></a></1i> 
<1i><a href="contact .html"> 联 系 我 们 <span> 联 系 我 们 </span></a> 
</11i> 
</ul> 
</div> 
<div class="clearfram"></div> 
</div> 
<div class="contentfram"> 
<h2> 关 于 我 们 </h2><hr /> 
<div class="leftfram"><br /> 
你 已 经 使 我 永生 ， 这 样 做 是 你 的 快乐 。<br/> 
这 脆 薄 的 杯 儿 ， 你 不 断 地 把 它 倒 空 ， 又 不 断 地 以 新 生命 来 充满 。<br/> 
这 小 小 的 苇 笛 ， 你 携带 着 它 逾 山越 谷 ， 从 第 管 里 吹出 永 新 的 音乐 。<br/> 
在 你 双手 的 不 朽 的 按 抚 下 ， 我 的 小 小 的 心 ， 消 融 在 无 边 快乐 之 中 ， 发 出 不 可 言说 的 词 调 。<br/> 
你 的 无 穷 的 赐予 只 倾 入 我 小 小 的 手 里 。 时 代 过 去 了 ， 你 还 在 倾注 ， 而 我 的 手 里 还 你 已 经 使 我 永生 ， 
这 样 做 是 你 的 快乐 。<br/> 
这 脆 薄 的 杯 儿 ， 你 不 断 地 把 它 倒 空 ， 又 不 断 地 以 新 生命 来 充满 。<br/> 
<br/> 
</div> 
<div class="rightfram"></div> 
<div class="clearfram"></div> 
</div><br /> 
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</div> 
</body> 
</html> 


效果 如 图 21.5 所 示 。 


图 21.5 “关于 我 们 ”页 面 整合 效果 图 


各 说 明 : 页 面 代码 里 ， 为 导航 条 做 了 五 个 链接 : 关于 我 们 ( aboutmehtml ) 、 鲜 花 展示 
(producthtml ) 、 最 新 日 志 (news.html) 、 留 言 版 (message.html) 、 联 系 我 们 
(contact.html ) 。 


21.2.2 整合 “鲜花 展示 ”页 面 


“鲜花 展示 ”页 面 只 需要 在 “关于 我 们 ”页 面 上 做 修改 即 可 ， 只 要 把 下 面 的 内 容 更 换 
成 “鲜花 展示 ”相关 的 内 容 。 在 第 19.4 节 里 讲 过 图 片 的 排列 ， 这 里 将 使 用 图 片 的 排列 显示 
鲜花 相关 的 内 容 对 页 面 进行 填充 。 

【示例 21.6】 下 面 是 “鲜花 展示 ”页 面 整 合 的 具体 效果 。 示 例 使 用 的 是 外 部 样式 表 ， 
是 使 用 了 前 面 的 20.3.css、19.3.css 和 19.12.css。 由 于 20.3.css 和 19.3.css 文件 没有 改动 的 地 
方 ， 所 以 这 里 只 给 出 19.12.css 和 页 面 文件 的 代码 。 代 码 如 下 。 

19.12.css 文件 代码 : 


@charset "utf-8"; 
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/*CSS Document*/ 

-imgfram 

| 
border:2px #996666 solid; /* 设 置 边框 */ 
width:132px; 
height:200px; 


margin:8px; /* 设 置 外 边 距 */ 
text-align:center; /* 设 置 居中 显示 */ 
float:left; /* 设 置 浮动 */ 


background-color:#F6EABA; 
有 


页 面 文件 代码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www 
.W3.0rg/TR/xhtml1/DTD/xhtmll-transitional .dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 博 客 日 志 </title> 
<link href="19.3.css" rel="stylesheet" type="text/css" /><!-- 调 用 外 部 链接 --> 
<link href="20.3.css" rel="stylesheet" type="text/css" /><!-- 调 用 外 部 链接 --> 
<link href="19.12.css" rel="stylesheet" type="text/css" /><!-- 调 用 外 部 链接 --> 
</head> 
<body> 
<div class="mainfram"> 
<div class="headfram"></div> 
<div clas titlefram"> 
<div id="nav"> 


<ul> <!-- 插 入 列表 --> 
<1i><a href="about .html"> 关 于 我 们 <span> 关 于 我 们 </span></a> 
/> 
<1i><a href="product .html"> 鲜 花 展示 <span> 鲜 花 展示 </span></a> 
eA 
<1i><a href="news.html"> 最 新 日 志 <span> 最 新 日 志 </span></a> 
/LI 


<1i><a href="message.html"> 留 言 版 <span> 留 言 版 </span></a></1i> 

<1i><a href="contact .html"> 联 系 我 们 <span> 联 系 我 们 </span></a> 

</11i> 

</ul> 
</div> 
<div class="clearfram"></div> 
</div> 
<div class="contentfram"> 
<h2> 鲜 花 展示 </h2><hr /> 
<div class="leftfram"> 
<div class="imgfram"><img src="../images/19.12 1.jpg" 
width="100px"” height="100px" /><br /> 红色 康 乃 世 </div> 
<!-- 插 入 图 片 --> 

<div class="imgfram"><img src="../images/19.12 2.jpg" width="100px" 
height="100px"/><br /> 向 日 葵 </div> <!-- 插 入 图 片 --> 
<div class="imgfram"><img src="../images/19.12 3.jpg" width="100px" 
height="100px"/><br /> 粉 玫瑰 </div> <!-- 插 入 图 片 --> 
<div class="imgfram"><img src="../images/19.12 4.jpg" width="100px" 
height="100px"/><br /> 白 玫瑰 </div> <!-- 插 入 图 片 --> 
<div class="imgfram"><img src="../images/19.12 5.jpg" width="100px" 
height="100px"/><br /> 康 乃 志 </div> <1!-- 择 入 图 片 --> 
<div class="imgfram"><img src="../images/19.12 6.jpg" width="100px" 
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height="100px"/><br /> 黄色 康乃馨 </div> ”<!-- 揪 入 图 片 --> 
<div class="imgfram"><img src="../images/19.12 7.jpg" width="100px" 
height="100px"/><br /> 白色 康 乃 世 </div> <!-- 插 入 图 片 --> 
<div class="imgfram"><img src="../images/19.12 8.jpg" width="100px" 
height="100px"/><br /> 粉 玫瑰 </div> <!-- 插 入 图 片 --> 


<div class="imgfram"><img src="../images/19.12 9.j 


pg" width="100px" 


height="100px"/><br /> 粉色 康 乃 志 </div> ”<!-- 插 入 图 片 --> 


</div> 
<div class="rightfram"></div> 
<div class="clearfram"></div> 
</div><br /> 
</div> 
</body> 
</html> 


效果 如 图 21.6 所 示 。 


uC on 
本 要 


图 21.6 “鲜花 展示 ”页 面 整合 效果 图 


21.2.3 ”整合 “最 新 日 志 ” 页 面 


“最 新 日 志 ” 页 面 也 是 在 “关于 我 们 ”页 面 上 稍 作 修 改 即 可 ， 只 要 把 下 面 的 内 容 更 换 


成 日 志 相 关 的 内 容 就 可 以 了 。 在 第 19 章 里 有 讲 过 横向 日 志 列表 , 这 是 


显示 日 志 相 关 的 内 容 对 页 面 进 行 填充 。 


将 使 用 横向 日 志 列 表 


【示例 21.7】 下 面 是 “最 新 日 志 ” 页 面 整 合 的 具体 效果 。 示 例 使 用 的 是 外 部 样式 表 ， 


是 使 用 了 前 面 的 20.3.css、19.3.css 和 19.6.css。 由 于 20.3.css 和 19.3. 
方 ， 所 以 这 里 只 给 出 19.6.css 和 页 面 文件 的 代码 。 代 码 如 下 。 
19.6.css 文件 代码 : 


css 文件 没有 改动 的 地 
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Q@charset "utf-8"; 

/*CSS Document*/ 

.listfram{height:360px;} 

.listfram ol{list-style-type:none; padding:10px;} 

.listfram 1i 

{ 
display:block; /* 定 义 列表 横向 排列 */ 
float:left; /* 定 义 列表 横向 排列 */ 
height:20px; 
width:150px; 


font-size:14px; /* 设 置 字体 大 小 */ 
padding-left:30px; /* 设 置 内 边 距 */ 
padding-top:10px; /* 设 置 内 边 距 */ 
margin-top:7px; /* 设 置 外 边 距 */ 
border-bottom:dotted 1lpx #996600; /* 设 置 边 框 */ 


background:url(../images/21.5.jpg) no-repeat; /* 设 置 背 景 图 */ 
} 
页 面 文 件 代码 : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www 
.W3.0rg/TR/xhtml1/DTD/xhtmll-transitional .dtd"> 
<html] xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 博 客 日 志 </title> 
<link href="19.3.css" rel="stylesheet" type="text/css" /><!-- 调 用 外 部 链接 --> 
<link href="20.3.css" rel="stylesheet" type="text/css" /><!-- 调 用 外 部 链接 --> 


<link href="19.6.css" rel="stylesheet" type="text/css" /><!-- 调 用 外 部 链接 --> 
</head> 


<body> 
<div class="mainfram"> 
<div class="headfram"></div> 
<div clas titlefram"> 
<div id="nav"> 


<ul> <!-- 插 入 列表 --> 
<1i><a href="about .html"> 关 于 我 们 <span> 关 于 我 们 </span></a> 
cAIis 
<1i><a href="product .html"> 鲜 花 展示 <span> 鲜 花 展示 </span></a> 
</1i> 
<1i><a href="news.html"> 最 新 日 志 <span> 最 新 日 志 </span></a> 
人 </ 


<1i><a href="message.html"> 留 言 版 <span> 留 言 版 </span></a></1i> 
<1i><a href="contact .html"> 联 系 我 们 <span> 联 系 我 们 </span></a> 
</ LL 
</ul> 
</div> 
<div class="clearfram"></div> 
</div> 
<div class="contentfram"> 
<h2> 最 新 日 志 </h2> 
<hr /> 
<div class="leftfram"> 
<div class="1istfram"> 
xol> <!-- 插 入 列表 --> 
<1i> 日 志 栏目 1</1i> 
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<1i> 日 志 栏 目 2</1i> 
<1i> 日 志 栏 目 3</1i> 
<1i> 日 志 栏 目 4</1i> 
<1i> 日 志 栏 目 5</1i> 
<1i> 日 志 栏 目 6</1i> 
<1i> 日 志 栏 目 7</1i> 
<1i> 日 志 栏 目 8</1i> 
<1i> 日 志 栏 目 9</1i> 
<1i> 日 志 栏 目 10</1i> 
<1i> 日 志 栏 目 11</1i> 
<1i> 日 志 栏 目 12</1i> 
</ol1> 
</div> 
</div> 
<div class="rightfram"></div> 
<div class="clearfram"></div> 
</div><br /> 


</div> 

</body> 

</html> 

效果 如 图 21.7 所 示 。 


图 21.7 “最 新 日 志 ” 页 面 整合 效果 图 


21.2.4 ”整合 “留言 版 ”页 面 


“留言 版 ”页 面 也 只 需要 在 “关于 我 们 ”的 页 面 上 稍 作 修 改 ， 只 要 把 下 面 的 内 容 更 换 
成 留言 版 相关 的 内 容 就 可 以 了 。 这 里 使 用 的 留言 版 表单 会 和 table 里 的 一 样 。 

【示例 21.8】 下 面 是 “留言 版 ”页 面 整合 的 具体 效果 。 示 例 使 用 的 是 外 部 样式 表 ， 是 
使 用 了 前 面 的 20.3.css、19.3.css 和 19.9.css。 由 于 20.3.css 和 19.3.css 文件 没有 改动 的 地 方 ， 
所 以 这 里 只 给 出 19.9.css 和 页 面 文件 的 代码 。 代 码 如 下 。 

19.9css 文件 代码 : 
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Q@charset "utf-8"; 

/*CSS Document*/ 

.formfram{ width:402px; margin:20px; height:340px;} 
.formfram ul{list-style-type:none; } 

-formfram li{margin-bottom:10px; font-size:14px;} 

input, textarea{border:1lpx solid #996600; background:#fff;} 
input, textarea 


{ 


star : expression (onmouseover=function() {this.style.backgroundColor= 


"#FFFOD2"}, 
onmouseout=function(){ 
this.style.backgroundColor="#fff" 
}) 
} 
-in80 {width:80px;} 
-in120 {width:120px;} 
.in250 {width:250px;} 
.submitfram{border:0; margin-top:10px;} 


页 面 文件 代码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www 


.W3.0rg/TR/xhtml1/DTD/xhtmll-transitional .dtd"> 
<html xmlns="http://www.w3.0org/1999/xhtml"> 
<head> 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 博 客 日 志 </title> 

<link href="19.3.css" rel="stylesheet" type="text/css" /><!-- 调 用 外 部 链接 --> 
<link href="20.3.css" rel="stylesheet" type="text/css" /><!-- 调 用 外 部 链接 --> 


<link href="19.9.css" rel="stylesheet" type="text/css" /><!-- 调 用 外 部 链接 --> 
</head> 


<body> 


<div class="mainfram"> 
<div class="headfram"></div> 


<div clas 


titlefram"> 
<div id="nav"> 


<ul> <!-- 插 入 列表 --> 
<1i><a href="aboutme .html"> 关 于 我 们 <span> 关 于 我 们 </span></a> 
</11i> 
<1i><a href="product .html"> 鲜 花 展示 <span> 鲜 花 展示 </span></a> 
</1i> 
<1i><a href="news.html"> 最 新 日 志 <span> 最 新 日 志 </span></a> 
</1i> 


<1i><a href="message.html"> 留 言 版 <span> 留 言 版 </span></a></1i> 
<1i><a href="contact .html"> 联 系 我 们 <span> 联 系 我 们 </span></a> 
</11> 
</ul> 
</div> 
<div class="clearfram"></div> 


</div> 
<div class="contentfram"> 


ms 


<h2> 留 言 版 </h2><hr /> 
<div class="leftfram"> 
<div class="formfram"> 
<form method="post" action="" > 
<ul> <!-- 插 入 列表 --> 
<1i> 您 的 名 字 : 


<input class="in80" type="text" /></1i> 
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<! 一 -设置 输入 框 --> 
<1i> 联 系 电 话 : <input class="in120" type="text" /> 
/I <!-- 设 置 输入 框 --> 
<1i> 联 系 地 址 : <input class="in250" type="text" /> 
</1i> <!-- 设 置 输入 框 --> 


<li><textarea name="textarea" id="textarea" 
cols="45"” rows="5"> 请 输入 留言 内 容 </textarea></1i> 
<!-- 设 置 输入 文本 域 --> 
<1i> 
<input class="submitfram" type="image" 
name="imageField" id="imageField" src="../ 
images/19.10.jpg" /> <!-- 设 置 提交 按钮 -=-> 


<input class="submitfram" type="image" 


name="imageField" id="imageField" src="../ 
images/19.11.jpg"” /><!-- 设 置 重 置 按钮 --> 
x/ 
</ul> 
</form> 
</div> 


</div> 
<div class="rightfram"></div> 
<div class="clearfram"></div> 
</div><br /> 


</div> 

</body> 

</html> 

效果 如 图 21.8 所 示 。 


图 21.8 “留言 版 ”页 面 整合 效果 图 


21.2.5 整合 “联系 我 们 ”页 面 


“联系 我 们 ”页 面 也 是 在 “关于 我 们 ”页 面 上 做 修改 ， 只 要 把 下 面 的 内 容 更 换 成 “ 联 
系 我 们 ”相关 的 内 容 就 可 以 了 。 这 里 使 用 的 “联系 我 们 ”会 在 table 里 的 “联系 我 们 ”的 基 
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础 上 再 加 上 一 个 网 站 地 图 。 

【示例 21.9】 下 面 是 “联系 我 们 ”页 面 整合 的 具体 效果 。 示 例 使 用 的 是 外 部 样式 表 ， 
是 使 用 了 前 面 的 20.3.css、19.3.css 和 19.8.css。 由 于 20.3.css 和 19.3.css 文件 没有 改动 的 地 
方 ， 所 以 这 里 只 给 出 19.8.css 和 页 面 文件 的 代码 。 代 码 如 下 。 

19.8.css 文件 代码 : 


@charset "utf-8"; 
/*CSS Document*/ 
dl{ margin-left:40px;} 


dt 

{ 
background:url(../images/19.9.jpg) no-repeat; /* 设 置 背 景 图 */ 
font-size:14px; /* 设 置 字体 大 小 */ 
padding-left:20px; /* 设 置 内 边 距 */ 
height:25px; 

} 

页 面 文 件 代码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www 
.W3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.o0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 博 客 日 志 </title> 

<link href="19.3.css" rel="stylesheet" type="text/css" /><!-- 调 用 外 部 链接 --> 
<link href="20.3.css" rel="stylesheet" type="text/css" /><!--1 
<link href="19.8.css" rel="stylesheet" type="text/css"” /><!-- 调 用 外 部 链接 --> 
<style type="text/css"> 

i= 

.contactfram{font-size:14px; line-height:24px; margin-left:40px;} 
.contactfram a{ text-decoration:none; color:#993300; font-weight:bold;} 
.marqueefram{height:50px; width:200px; padding-top:3px;} 

==> 

</style> 

</head> 


<body> 
<div class="mainfram"> 
<div class="headfram"></div> 
<div class="titlefram"> 


<div id="nav"> 

<ul> <!-- 插 入 列表 --> 
<1i><a href="about .html"> 关 于 我 们 <span> 关 于 我 们 </span></a> 
</1i> 
<1i><a href="product .html"> 鲜 花 展示 <span> 产 品 展示 </span></a> 
< 
<1i><a href="news.html"> 最 新 日 志 <span> 新 闻 动 态 </span></a> 
</TLL> 


<1i><a href="message.html"> 留 言 版 <span> 留 言 版 </ span></a></1i> 
<1i><a href="contact .html"> 联 系 我 们 <span> 联 系 我 们 </span></a> 
</1i> 
</ul> 
</div> 
<div class="clearfram"></div> 
</div> 
<div class="contentfram"> 
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</div> 
</body. 
</html 


效果 如 


<h2> 联 系 我 们 </h2><hr /> 


<div class="leftfram"> 
<div class="contactfram"> 
联系 电话 : 187****#***<br /> 
联系 地 址 : XXXXXXXXXXXXXX<br /> 
E-mail: <a href="mailto:253544738872@126.com"> 
253544738872@126.com</a><br /> 
</div> 
<hr /> 
<h2 style="margin-left:-20px;"> 网 站 地 图 </h2> 
<dl> <!-- 插 入 列表 --> 
<dt> 关 于 我 们 </dt> 
<dt> 鲜 花 展示 </dt> 
<dt> 最 新 日 志 </dt> 
<dt> 留 言 版 </dt> 
<dt> 联 系 我 们 </dt> 
</dl> 
sh /> 
<marquee id="mar" onfinish="setTimeout('mar.outerHTML= 
mar.outerHTML', 1000)" width="350px" height="30px" 
behavior="slide" onmouseover=this.stop() onmouseout= 
this.start() scrollAmount=1 scrollDelay=1> 


<div class="marqueefram"> 欢 迎 光临 我 的 博客 </div> 


</marquee> 


</div> 


<div class="rightfram"></div> 
<div class="clearfram"></div> 
</div><br /> 


> 
> 


图 21.9 所 示 。 
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图 21.9 “联系 我 们 ”页 面 整合 效果 图 
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各 技巧 : 到 这 里 ， 已 经 把 网 站 的 五 个 页 面 都 制作 完了 ， 通 过 导航 条 ， 就 可 以 看 到 制作 出 来 
的 每 个 页 面 了 ， 这 就 是 一 个 简单 的 div+CSS 网 站 。 
学 习 完 制作 网 站 之 后 ， 可 以 通过 上 面 提供 的 一 些 例子 ,来 做 更 多 、 更 好 的 网 站 。 当 然 ， 
做 出 一 个 好 的 网 站 不 止 要 掌握 前 面 说 的 这 些 东 西 ， 还 应 该 不 断 地 去 学 习 更 多 的 东西 ， 如 
JavaScript、CSS， 都 是 必须 好 好 学 习 的 对 象 。 


21.3 本 章 小 结 


本 章 通 过 制作 一 个 完整 的 博客 网 站 ， 把 前 面 所 学 的 知识 全 部 都 复习 了 一 遍 ， 来 让 读者 
对 前 面 所 学 的 知识 有 进一步 的 了 解 。 本 章 是 这 本 书 的 最 后 一 章 ， 通 过 综合 地 学 习 网 站 的 制 
作 ， 可 以 掌握 到 一 个 网 站 的 制作 过 程 。 学 习 完 本 章 之 后 ， 相 信 读 者 已 经 掌握 了 如 何 去 制作 
一 个 好 看 的 能 实现 基本 功能 的 静态 网 站 了 。 在 以 后 的 网 站 制作 中 ， 要 充分 运用 前 面 所 讲 的 
知识 ， 这 样 才 会 熟 能 生 巧 。 
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